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

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

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

表格默认样式：

修改后的样式需求：

解决方案：

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

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

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

源代码：

script部分： 编写newStyle函数

注意: 各变量名、函数名需要保持一致

style部分：

此时我们来看看效果。👇👇👇 我们发现，表格的样式并未发生改变。

对应的有两种解决方案

我们尝试删除scoped之后，显示效果如下 👇👇👇 到目前为止，解决方案第一步实现。可以看到表格的斑马纹依然存在。 这时就需要通过不可控操作来去除斑马纹。

斑马纹效果如下图：👇👇👇

style部分： 在新的行样式中添加禁用操作（这也意味着表格自带的触控样式会全部消失）

此时我们来看看实现效果如何 👇👇👇 很显然，到目前为止我们完成了解决方案的所有步骤。更改了表格行颜色，同时也取消了斑马纹，需求得以实现。

基础表格源码【未经处理】：（包含表格数据data、表格纵列目录columns）

ant design vue组件库中table表格学问很多，有很多功能值得我们去研究探索。下期文章将以本文为基础进行延伸，介绍 如何根据数据属性更改行样式。