根据数据属性值添加table表格行样式（rowClassName）

• 知识调用
• 场景复现
• • 利用rowClassName编写行样式
  • 编写行样式函数➕筛选条件
  • 编写特定的行样式
  • 取消相应的斑马纹样式

知识调用

场景复现

在 vue3➕antd➕ts 的项目开发中，table表格无处不在，而对于table表格的操作有很多，比如 根据表格数据的属性显示不同的样式（颜色）。本期文章将以此为实例，提供详细方案实现需求。

表格初始状态：（如下图）

• 含表格自带的斑马纹
• 所有行样式一致，没有根据表格数据属性区分样式

未根据表格数据的属性进行区分👇👇👇

未根据表格数据属性对应去除斑马纹👇👇👇

表格样式需求：

• 根据表格数据的属性渲染不同的颜色样式
• 根据表格数据的属性去除相应数据的斑马纹样式

解决方案：

• rowClassName ➕ 筛选条件 ➕ 样式函数
• pointer-events: none; 取消斑马纹

利用rowClassName编写行样式

表格部分：（点击了解表格是如何实现的🔥🔥）

如上图，绑定rowclass属性，调用rowclassname函数。（此函数即为样式函数，用于调用新的行样式）

编写行样式函数➕筛选条件

样式函数部分：

如上图所示，返回新的行样式。这里使用了一个三目表达式，根据表格传递的数据的属性对应相应的行样式。

const rowclassname = (record:tableInt) => {// console.log("777",toRaw(record).deleted)return toRaw(record).deleted === 1 ? 'row-color' : ''
}

ps：

• 这里的record是表格里的删除按钮传过来的值
• 点击删除则会改变deleted属性的值
• toRaw是vue3里的一个函数方法，主要作用是取消数据的跟踪，UI界面不会随之更新。

// 三目运算符在这里也可以用if语句替换
const rowclassname = (record:tableInt) => {if (record.deleted === 1) {return 'row-color'} else {return ''}
}

比如在这里，如果数据的deleted属性值为1，则返回特定的行样式，否则则保持原来的样式。

编写特定的行样式

style部分：

这个时候我们来看看效果👇👇👇

无论触碰与否，都不会有斑马纹样式。
显然，截至目前已经实现了需求的第二点——根据数据属性去除相应的斑马纹样式。