ヘッダーのチェックボックスをテキスト実装コードに変更するための選択テーブルを持つ要素

方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフェースコード

<el-テーブル
    ref="複数のテーブル"
    :data="テーブルデータ"
    :header-cell-class-name="セルクラス"
    スタイル="幅: 100%">
    <el-テーブル列
      タイプ="選択">
    </el-table-column>
    <el-テーブル列
      label="日付"
      幅="120">
      <テンプレート スロット スコープ="scope">{{ scope.row.date }}</テンプレート>
    </el-table-column>
    <el-テーブル列
      プロパティ="名前"
      label="名前"
      幅="120">
    </el-table-column>
    <el-テーブル列
      prop="アドレス"
      label="住所"
      >
    </el-table-column>
  </el-table>

対応するjs

データ（） {
      戻る {
        テーブルデータ: [{
          日付: '2016-05-03'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-02'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }],
        複数選択: []
      }
    },
    メソッド: {
      セルクラス(行){
        行の列インデックスが0の場合
          'DisabledSelection' を返す
        }
      }
    }

対応するCSS

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
  表示:なし;
  位置:相対;
}
.el-table /deep/.DisabledSelection .cell:before{
  コンテンツ:"選択";
  位置:絶対;
  右 11px;
}

/deep/ の機能: 他の人のコンポーネントを使用したり、自分でコンポーネントを開発したりする場合、1 か所を変更すると、他の場所に影響が及ぶことがあります。このとき、他の人のコンポーネントを使用せずに自分で再パッケージ化しますが、これは現実的ではないことがよくあります。そのため、他の場所に影響を与えず、サブコンポーネントの現在のスタイルを変更できる /deep/ を使用する必要があります。

方法 2: テーブル列ヘッダー属性を使用する: label-class-name

インターフェースコード

<el-テーブル
    ref="複数のテーブル"
    :data="テーブルデータ"
    スタイル="幅: 100%"
    @selection-change="ハンドル選択変更">
    <el-table-column ラベルクラス名="無効な選択"
      タイプ="選択">
    </el-table-column>
    <el-テーブル列
      label="日付"
      幅="120">
      <テンプレート スロット スコープ="scope">{{ scope.row.date }}</テンプレート>
    </el-table-column>
    <el-テーブル列
      プロパティ="名前"
      label="名前"
      幅="120">
    </el-table-column>
    <el-テーブル列
      prop="アドレス"
      label="住所"
      オーバーフローツールチップを表示>
    </el-table-column>
  </el-table>

対応するCSS

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
  表示:なし;
  位置:相対;
}
.el-table /deep/.DisabledSelection .cell:before{
  コンテンツ:"選択";
  位置:絶対;
  右 11px;
}

方法3: document.querySelector() インターフェースコードを使用する

<el-テーブル
    ref="複数のテーブル"
    :data="テーブルデータ"
    スタイル="幅: 100%"
    @selection-change="ハンドル選択変更">
    <el-テーブル列
      タイプ="選択">
    </el-table-column>
    <el-テーブル列
      label="日付"
      幅="120">
      <テンプレート スロット スコープ="scope">{{ scope.row.date }}</テンプレート>
    </el-table-column>
    <el-テーブル列
      プロパティ="名前"
      label="名前"
      幅="120">
    </el-table-column>
    <el-テーブル列
      prop="アドレス"
      label="住所"
      オーバーフローツールチップを表示>
    </el-table-column>
  </el-table>

対応するjs

マウントされた(){
  this.$nextTick(()=>{
    これを初期化します。
  })
},
メソッド: {
  初期化(){
  document.querySelector(".el-checkbox__inner").style.display="なし";
  document.querySelector(".cell").innerHTML = '選択'      
      }
}

方法4: 選択範囲を使用して列を選択せず、チェックボックスを使用するように列を書き換える

<el-テーブル
      :data="テーブルデータ"
      スタイル="幅: 100%">
      <el-テーブル列
        プロパティ="日付"
        label="選択"
        幅="50">
        <テンプレート スロット スコープ="スコープ">
          <el-チェックボックス></el-チェックボックス></テンプレート>
      </el-table-column>
      <el-テーブル列
        プロパティ="名前"
        label="名前"
        幅="180">
      </el-table-column>
      <el-テーブル列
        prop="アドレス"
        label="住所">
      </el-table-column>
    </el-table>

方法5: CSSスタイルを直接変更する

.el-table__header .el-table-column--選択 .cell .el-checkbox {
  表示:なし
}
.el-table__header .el-table-column--選択 .cell:before {
  コンテンツ: "選択";
}

要約する

選択テーブルを持つ要素のヘッダーのチェックボックスをテキストに変更する方法についての記事はこれで終わりです。選択テーブルを持つ要素のヘッダーのチェックボックスをテキストに変更する方法に関する関連情報については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Docker+DockerCompose を使用して Web アプリケーションをカプセル化する方法

>>: HTML のテキストエリアの改行問題の概要