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

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

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 データベースとデータ構造の関係1.2 なぜデータベースが必要...

VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム

VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...

Vueブラウザが監視を再開するための具体的な手順

序文ページを共有するときに、ブラウザの戻るボタンをクリックしてプロジェクトのホームページに戻り、訪問...

JQueryはアニメーション効果の非表示と表示を実装します

この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考まで...

Vue ベースの要素ボタン権限実装ソリューション

背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタン レ...

Win10システムにMySQL 8.0をインストールするときに発生する問題を解決する

Win10 システムに MySQL 8.0 をインストールする際に発生する問題と解決策は次のとおりで...

プログレッシブ ウェブ アプリ (PWA) の開発方法

目次概要必要とするアプリURL PWA にはどのような技術コンポーネントが必要ですか?マニフェストフ...

MySQLのexplain型の詳細な説明

導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

ウィンドウとLinuxプロジェクトを展開する際のLinuxファイルパスに問題はありません

長い間ブログを書いていませんでした。先週、プロジェクトをテストしたところ、いくつかのバグが見つかりま...

MySQLの日付と時刻関数の使用の概要

この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...

JavaScript のシングルトン デザイン パターン

目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....

ノードをMySQLデータベースに接続する際に発生する問題と解決策

今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...

Vueはカルーセルのフレームレート再生を実装します

この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...

SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...