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

2024-06-28 12:13:30

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

antd-design-vue table表格选中每行设置背景色相关推荐
1. antd table表格选中每行设置背景色
  1.文档显示,table表格中有rowClassName属性 Table 参数 --------------------------------- 说明------------------------ ...
2. ant design vue table表格组件实现隔行变色
  ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
3. vue3 antd table表格样式修改——ant design vue table表格的行高调整
  vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
4. Ant Design Vue table表格点击行选中多选框
  参考官方文档,实现点击行选中前边的多选框 <template><div><a-table :rowSelection="{selectedRowKeys: se ...
5. html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
  layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作. 实现效果: HTML代码: 获取选中行数据设置选中行 layui.use('table', func ...
6. Ant Design Vue Table 组件合并单元格
  Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
7. antvue table 表格实现首行搜索
  antvue table 表格实现首行搜索首先创建一个组件用来渲染头部输入框 <template><div class="filter"><tr ...
8. 如何给table表格的tr行加border边框（解决篇）
  文章目录一.如何给table表格的tr行加border边框二.样式 bug - 截图示下三.解决办法: 四.关于属性 `border-collapse`的取值.解析一.如何给table表格的t ...
9. ant design vue table分页
  ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...
最新文章
热门文章