1.template部分
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<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-column
fixed="right"
label="操作">
<template solt-scope="scope">
<span
size="mini"
@click="detail(scope.row)"
>
查看详情
</span>
</template>
</el-table-column>
</el-table>
</template>
2.给table进行绑定
//row-class-name 属性来为 Table 中的某一行添加 class
:row-class-name="tableRowClassName"
//条件判断可以根据自己的来
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
}
return '';
}
},
3.js部分
/deep/.el_table .warning-row{
background-color:rgba(252,86,50,0.5);
}
//由于最后一列fix定位了,因此需要修改改为白色
/deep/.el_table_fixed-right{
background:#fff;
}
关于最后一列fixed也可以通过删除fixed=“right”;也可以如上设置背景色为白色。