antd-design-vue table表格选中每行设置背景色

原创已于 2022-06-22 16:10:04 修改 · 5.2k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-06-22 16:00:38 首次发布

本文讲述了如何在表格组件中使用rowClassName属性，通过比较selectedRowKeys与每个record的id，实现选中行的背景色替换，并解决默认背景问题，以达到预期的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查看文档，table组件中有一个属性
在table表格中定义该属性：
rowClassName的属性值是一个回调函数，有两个参数， record和index，我这里是只用到一个record;
this.selectedRowKeys是我选中的表格行的ID组成的数组，用record里面的id和this.selectedRowKeys里面的每一项进行比较，相等的话就代表当前行已经选中；
这里是样式部分：
本以为到这里就完成了，但看了一眼页面没有效果😢😢😢，没办法，检查元素后发现每一行里面的td标签都有默认的背景颜色：

把这个样式取代掉就可以了：
最终效果：