table 某一行添加 class改变该行的颜色等样式
2020-05-29 本文已影响0人
地主家也没余粮叻
header-cell-style
cell-class-name
效果图
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;
}
}
}
}