要素テーブルからヘッダーを削除する方法

要素テーブルからヘッダーを削除する方法

show-header
属性を使用したドキュメントのヒントshow-header

 <el-テーブル
            :data="テーブルデータ1"
            :span-method="配列スパンメソッド"
            国境
            :show-header="ステータス"
              <el-テーブル列
              prop="ラベル"
              ラベル=""
              幅="180">
            </el-table-column>
           /el-テーブル >

!!!重點就是要:show-header動態控制

Element-uiテーブルはすべての境界線を削除します

el-table に class="customer-no-border-table" を追加します

/*表のセルの境界線を削除します*/
   .customer-no-border-table th{
     境界線:なし;
   }
.customer-no-border-table td、.customer-no-border-table th.is-leaf {
  境界線:なし;
}
 /*テーブルの最も外側の境界線*/
.customer-no-border-table .el-table--border、.el-table--group{
     境界線: なし;
   }
  /*ヘッダーの境界線*/
   .customer-no-border-table thead tr th.is-leaf{
     境界線: 0px 実線 #EBEEF5;
     右境界線: なし;
   }
.customer-no-border-table thead tr th:nth-last-of-type(2){
  右境界線: 0px 実線 #EBEEF5;
}
 /*表の最も外側の境界線 - 下の境界線*/
.customer-no-border-table .el-table--border::after、.customer-no-border-table .el-table--group::after{
     幅: 0;
   }
.customer-no-border-table::before{
  幅: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
  幅: 0;
}
.customer-no-border-table .el-table__header tr th{
  背景: #fff;
  色: #333333 ;
  パディング: 3px;
  フォントの太さ: 550 ;
  高さ: 36px;
  境界線: 0px;
  フォントサイズ: 15px;
}

要素テーブルのヘッダーを削除する方法についての記事はこれで終わりです。要素テーブルのヘッダーを削除する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 要素テーブルヘッダー行の高さの問題の解決
  • Vue+Element カスタム垂直テーブルヘッダーチュートリアル
  • 要素はテーブルのネストを実現し、複数のテーブルが1つのヘッダーを共有します。
  • Vueは要素テーブルにヘッダー情報プロンプト機能を実装します(推奨)
  • Vue+elementuiは、複雑なヘッダーと動的に追加された列の2次元テーブル機能を実現します。
  • VUE2.0+ElementUI2.0 テーブル el-table はヘッダー拡張 el-tooltip を実装します

<<:  ROS で Turtlebot3 移動ロボットを制御するための基本的なチュートリアル

>>:  HTMLにリンクを挿入する方法

推薦する

さまざまなMySQLインデックスの使用方法の詳細な説明

1. 遅いクエリログ1.1 MySQL ログの種類ログは、データベースの操作や、ユーザーがデータベー...

Vueフォームバインディングとコンポーネントの詳細な説明

目次1. 双方向データバインディングとは1. データの双方向バインディングを実装する必要があるのはな...

Sublime Text - ブラウザのショートカットキーを設定するための推奨方法

コード効果を異なるブラウザで表示することはよくあることなので、異なるショートカットキーを使用して対応...

WindowsでのMySQLインストールチュートリアルの詳細な紹介

目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...

Dockerのネットワークモードと設定方法

1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...

CSSはコンテンツの高さが足りない場合にフッターを自動的に下部に固定します

UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることが...

MySQL Undo ログと Redo ログの概要

目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...

border-radiusは要素に丸い境界線を追加する方法です

border-radius:10px; /* すべての角は半径 10px で丸められます*/ bor...

Nginxのアクセスボリューム制御の詳細な説明

目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...

jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...

docker compose を使ってワンクリックで分散構成センター Apollo を展開するプロセスの詳細な説明

導入分散について話すときは、分散構成センター、分散ログ、分散リンク トラッキングなどについて考える必...

Winにmysqlをインストールする詳細な手順

この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...

MySQLでカンマ区切り値の列を列に変換する方法

序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...

Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介

1. フィルター例: <!DOCTYPE html> <html lang=&qu...