使用cell-class-name属性:
<el-table
:data="tableData"
:cell-class-name="setClass"
>
<el-table-column label="能力名称" prop="capabilityName" show-overflow-tooltip min-width="120" />
</el-table>
在方法中定义setClass方法:
methods: {
setClass({ row, column, rowIndex, columnIndex }) {
if (rowIndex >= this.tableData.length - 3) { // 给最后三行添加类名
return 'addBorder'
}
if (columnIndex === 0) { // 给第一列添加类名
return 'addBorder'
}
}
}
最后在css里设定样式
<style lang="scss" scoped>
::v-deep .el-table__row {
.addBorder {
border-right: 1px solid #dfe6ec;
}
}
</style>