根据官方文档来看的话，是在渲染数据的时候给表格行增加css属性
```javascript
const tableRowClassName = ({
row,
rowIndex,
}: {
row: User
rowIndex: number
}) => {
if (rowIndex === 1) {
return 'warning-row'
} else if (rowIndex === 3) {
return 'success-row'
}
return ''
}
```
css属性
```javascript
<style>
.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
```
然鹅我是用的phpstorm这个编辑器，他生成vue组件的时候会自动帮助填充一些内容，而style标签里面会多一个`scoped`属性，百度了一下：**在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块。但是同时，scoped也会阻碍我们修改第三方组件库（element plus）的样式。**
然后给出的解决办法是
```javascript
.el-table /deep/ .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
```
这样就能显示样式了，然而我在打包的时候提示这个已经弃用了
再次百度一下，
```javascript
.el-table :deep(.danger-row) {
--el-table-tr-bg-color: var(--el-color-danger-light-7);
}
```
用这样的写法后打包就不会提示了