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

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

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

推薦する

UTF-8 および GB2312 ウェブエンコーディング

最近、多くの学生から Web ページのエンコーディングについて質問を受けています。gb2312 と ...

LinuxシステムにISOファイルをインストールする方法

Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...

大きな MySQL テーブルに列を追加する方法

質問は https://www.zhihu.com/question/440231149 から参照さ...

HTMLでのフォーム送信の実装

フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...

Eclipseを使用してMySQLデータベースに接続する方法を説明します

序文常にエラーが発生するため、MySQL データベースに接続するプロセスを記録します。接続プロセス1...

Vue プロジェクトは左スワイプ削除機能を実装します (完全なコード)

成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

JavaScript 基礎シリーズ: 関数とメソッド

目次1. 関数とメソッドの違い2. 良い関数の書き方2.1 正確な命名2.1.1 関数の命名2.1....

bash を使って日付をカウントダウンする方法

重要なイベントまであと何日あるか知りたいですか? Linux bash と date コマンドが役に...

Vue で rem 適応を使用する方法

1. 開発環境vue 2. コンピュータシステム Windows 10 Professional E...

CSS3アニメーションジャミングソリューションについての簡単な説明

なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...

CSSレイアウトで中央揃えレイアウトを実現する方法

1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...

異なるドメイン名への PC または携帯電話のアクセスを区別するように Nginx を構成する方法

新しい公式サイトはオンラインですが、携帯電話で新しい公式サイトにアクセスすると、エクスペリエンスが非...

ElementUI の el-dropdown に複数のパラメータを実装する方法

最近、業務上のボタンの増加により、ページレイアウトにボタンが多すぎて、ページが美しくなく、ユーザーエ...

実行中のDockerコンテナのポートマッピングを変更する方法

序文docker run がコンテナを作成して実行するときに、-p を使用してポート マッピング ル...