elementUI のテーブルヘッダーにカスタム スタイル (チェック マーク) を追加します。

最近プロジェクト開発でelementUIのテーブルコンポーネントを使用しているのですが、テーブルの先頭に検証マークを設定しているのですが、テーブルの先頭にカスタムhtmlタグを追加したいと考えています。

結果は次のとおりです。

 

解決策: レンダーヘッダーを使用する

1. 列に render-header 属性をバインドします

 <el-table-column :label="地址" :render-header="renderHeader"></el-table-column>

2. 次にメソッドに renderHeader メソッドを追加します (elementUI 公式サイト rtable の詳しい説明を参照してください)

methods: {
    renderHeader(h) {
      return (
        <div>
          <span style="color:red">*</span>
          <span>地址</span>
        </div>
      )
    },
 }