美文网首页
table 某一行添加 class改变该行的颜色等样式

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

作者: 地主家也没余粮叻 | 来源:发表于2020-05-29 09:42 被阅读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;
               }
           }
        }
     }

相关文章