0
点赞
收藏
分享

微信扫一扫

Element - Vue改变表格某一列的单元格颜色

十日十月Freddie 2022-02-24 阅读 130

Element - Vue改变表格某一列的单元格颜色,只需要在el-table标签中加上:cell-style="cellStyle",以及实现该方法即可。

<el-table
  border
  size="mini"
  :data="productData.list"
  row-key="id"
  :cell-style="cellStyle"
  ref="productDataTable"
  @selection-change="handleSelectionChange">

  <el-table-column type="selection" width="55" reserve-selection align="center"></el-table-column>
  <el-table-column label="商品ID" prop="id" width="60" align="center"></el-table-column>
  <el-table-column label="未审核" width="80" align="center">
    <template slot-scope="scope">
      <el-link type="danger" v-if="scope.row.nonChecked === 0">{{scope.row.nonChecked}}</el-link>
      <el-link type="warning" v-else>{{scope.row.nonChecked}}</el-link>
    </template>
  </el-table-column>

  <el-table-column
    label="操作"
    prop="operation"
    width="160"
    align="center">
    <template slot-scope="props">
      <el-button
        type="primary"
        plain
        circle
        size="mini"
        title="详情"
        class="el-icon-document"
        @click="
          getProductInfo(props.$index, props.row);
          showDialog();">
      </el-button>

      <el-popconfirm
        confirmButtonText="确定"
        cancelButtonText="取消"
        @confirm="handleDelete(props.$index)"
        @cancel="cancelDelete()"
        title="确认删除此记录?">
          <el-button
            type="danger"
            plain
            circle
            size="mini"
            title="删除"
            slot="reference"
            class="el-icon-delete">
          </el-button>
      </el-popconfirm>
    </template>
  </el-table-column>
</el-table>

methods:{
  /**
   * 改变表格某一列的单元格颜色
   */
  cellStyle({row, column, rowIndex, columnIndex}) {
    let cellStyle;
    switch(row.nonChecked) {
        case 1:
          cellStyle = 'background: #ffdcdc;';
          break;
        case 0:
          cellStyle = '';
          break;
        default:
          cellStyle = '';
    }
    if(column.label == '未审核') {
      return cellStyle;
    }
  },
}

 

举报

相关推荐

0 条评论