下面使用 Vue 2 + Avue 2 的写法,要求项目已安装 Avue。Vue 3 / Avue 3 应核对对应版本的组件参数和深度选择器。

row-class-name 返回的是 CSS 类名,参数里使用 row 和 rowIndex。把状态为 warning 的行标红:

<template>
<avue-crud :option="option" :data="rows" :row-class-name="rowClassName" />
</template>
<script>
export default {
data() {
return {
rows: [{ name: '正常记录', status: 'ok' }, { name: '待处理记录', status: 'warning' }],
option: {
column: [{ label: '名称', prop: 'name' }, { label: '状态', prop: 'status' }]
}
}
},
methods: {
rowClassName({ row }) {
return row.status === 'warning' ? 'warning-row' : ''
}
}
}
</script>
<style>
.el-table .warning-row > td {
background-color: #fff0f0;
}
</style>

第二行单元格背景应变为浅红。示例样式未加 scoped,便于作用到组件内部;使用 scoped 样式时要按项目的 Vue 编译版本配置深度选择器。原示例里的 a098 是业务字段,接入实际表格时换成自己的判断条件。

参考:Avue 2 CRUD 属性。