vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式

知识调用

文章中可能会用到的知识链接
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
css样式穿透（/deep/ ::v-deep深度选择器）🔥🔥
vue3 antd项目实战——table表格（一文带你快速实现后台管理系统最常用的table表格）🔥🔥

场景复现

上期文章我们介绍了如何修改 ant design vue 表格的默认样式，并以 修改table表格的padding（调整表格行row的高度） 为例，以vue组件的css样式穿透为方法，详细介绍了解决方案。

本期文章将继续介绍table表格的默认样式修改。

• 主要内容：利用rowClassName给table添加行样式
• 实际例子：修改table表格的颜色
• 解决方法：rowClassName+ pointer-events: none;

修改table表格的行样式

修改默认行样式之前： 👇👇👇（表格源码附在文章最后）

表格默认样式：

• 当鼠标放在表格哪一行时，哪一行就会变色。（官方文档称其为斑马纹）
• 点击可移步官方文档具体查看
  

修改后的样式需求：

• 取消斑马纹
• 更改表格行样式（颜色）

解决方案：

• 修改行样式（颜色）——样式穿透+rowClassName添加行样式
• 表格行不可控（鼠标放在表格行上时无变色效果）——css不可控操作

一、rowClassName添加行样式

rowClassName是ant design vue组件库内置的一个API属性，通过 绑定对应的行样式 即可对table表格的默认行样式进行修改。

点击可移步官方文档具体查看

template部分：
绑定rowClassName属性，调用newStyle函数

源代码：

<template>
    <a-table 
        :columns="columns" 
        :data-source="data"
        :rowClassName="newStyle"
        >
        <template #bodyCell="{ column, text }">