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

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

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にリンクを挿入する方法

推薦する

Linuxでのaliasコマンドの使い方の詳細な説明

1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...

Baidu 入力メソッドが API を公開、自由に移植して使用できると主張

百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...

React setStateデータ更新メカニズムの詳細な説明

目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...

HTML ul 順序なしテーブルのアプリケーションネスト

順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...

SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明

目次プロジェクトディレクトリDockerファイルファイルの展開画像を生成するコンテナを起動するウェブ...

Nginx_geo モジュールを使用して CDN スケジュールを設定する方法

NginxのGeoモジュールの紹介geo ディレクティブは、ngx_http_geo_module ...

HTMLのタグと要素の違いの詳細な説明

ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...

Linuxでホスト名を永続的に変更する方法

ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...

HTML テーブルのオーバーフローの解決方法

テーブルが広い場合は、あふれてしまう可能性があります。たとえば、左と右の 2 つの div がありま...

Linux のような環境で jdk1.8 をインストールし、環境変数を設定する方法の詳細な説明

設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...

JSが絵柄デジタル時計を実現

この記事の例では、画像デジタル時計を実現するためのJSの具体的なコードを参考までに共有しています。具...

Dockerを使用してMySQL 8.0をデプロイする方法の例

1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...

Javascriptでビルダーパターンを実装する方法

概要ビルダー パターンは比較的単純なデザイン パターンであり、作成パターンに属します。定義: 複雑な...

負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。

ラベルテキストと入力の垂直方向の中央揃えを調整するのは簡単ではありません。padding、verti...

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...