table 某一行添加 class改变该行的颜色等样式

2020-05-29  本文已影响0人  地主家也没余粮叻
header-cell-style
cell-class-name
效果图
<template>
  <el-table
    :data="tableData2"
    style="width: 100%"
    :row-class-name="tableRowClassName" :header-cell-style="{color:'#9B9B9B',fontWeight: 'normal'}"
    :cell-class-name="cellClassName"
>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
methods:{
cellClassName({ row, column, rowIndex, columnIndex }){
    if (columnIndex > 2) {
         return 'handleTypeTextStyle';
      } else {
        return ''
     }
 },
}
// 样式
.el-table__row{
     td.handleTypeTextStyle{
         .cell{
             div{
                  text-decoration:underline;
                  cursor: pointer;
               }
           }
        }
     }
上一篇 下一篇

猜你喜欢

热点阅读