【Vue】el-tableのel-table-columnで、単一行、単一列を制御し、内容に応じて個別にスタイルを設定する方法。例: テキストの色、背景色の変更

実現するには、セル スタイル テーブル属性を使用します。公式サイトではこの属性がこのように表現されています。

 

 この属性を el-table の v-bind にバインドします。(v-bind の短縮形は次のとおりです:)

      <el-table
        :data="options"
        :cell-style="cell"
      >
        <el-table-column prop="id" label="id" width="50px"></el-table-column>
        <el-table-column prop="label" label="时间" width="200px"></el-table-column>
      </el-table>

データ内のオプション データは次のとおりです。

 data() {
    return {
      options: [
        { id: 1, label: "inner" },
        { id: 2, label: "webapi" },
        { id: 3, label: "inner-cron" }
      ],
    };
  },

この時点で、ページは次のように表示されます。

 

 

cellStyleメソッドをメソッド内で宣言します。各パラメータを出力して、それが何を表しているのかを確認してみましょう。

    cell({ row, column, rowIndex, columnIndex }) {
      console.log(row);
      console.log(column);
      console.log(rowIndex);
      console.log(columnIndex);
    },

コンソールには次の内容が出力されます。 

 

 実際、行が行であり、コンソールに表示される最初の行が配列の最初のオブジェクトであることは簡単に理解できます。column は列 (el-table-column) です。rowIndex は行インデックス、columnIndex は列インデックスです。

最初の行のフォントの色を緑色に変更したい場合。次のように書くことができます:

    cell({ row, column, rowIndex, columnIndex }) {
      if(rowIndex === 0){
        return "color:green"
      }
    },

ページの効果は次のとおりです。

最初の列の背景色を赤にしたい場合。それで：

    cell({ row, column, rowIndex, columnIndex }) {
      if(columnIndex === 0){
        return "background-color : red"
      }
      if(rowIndex === 0){
        return "color:green"
      }
    },

 ページは次のように表示されます。

 ラベルのフォントを inner-cron にしたい場合は太字にします。それで：

    cell({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "background-color : red";
      }
      if (rowIndex === 0) {
        return "color:green";
      }
      if (row.label === "inner-cron") {
        return "font-weight : bold";
      }
    },

ページは次のように表示されます。