ant design vue table表格组件实现隔行变色

一、使用方法

<a-table:columns="patient":data-source="patientList":scroll="{ x: 1500, y: 480 }":pagination="pagination" :customRow='dblclick':rowClassName = "rowClassName">

​ 通过使用rowClassName属性动态绑定一个方法（引号内名字可以更改），该方法名需要返回一个字符串，在官网table表格API中可以找到这个属性，官方给出类型为Function(record, index):string。record，index在下面解释，该类型即rowClassName绑定一个返回值为string类型的方法。

js代码：

rowClassName(record, index) {let className = 'light';if (index % 2 === 1) className = 'dark';return className;}

​ 在methods中创建该方法，其中record是表格中每一行的数据，index是表格中改行数据下表，这个是table组件中可以自己获取到的。

​ 然后设置一个字符串类型的数据，给该数据赋值为样式名字，单数行和奇数行为不同样式。light 和 dark 是我自己起的样式名，这个根据样式名字来，即你设置的背景颜色。

3. css代码：

.ant-table .light{background-color: white;}.ant-table .dark{background-color: rgb(240, 240, 241);}

① css这里是选择了ant-table 下的light和ant-table下的dark，因为组件内部有自己的样式如果无法正确选中这个样式的话一般是无法覆盖掉官方组件的样式的.

②如果使用了less样式的话，一定要找到这个组件所在的层级。例如我在div内使用了table组件

<div class="box"><a-table:columns="patient":data-source="patientList":scroll="{ x: 1500, y: 480 }":pagination="pagination" :customRow='dblclick':rowClassName = "rowClassName"></div>

这样我需要

.box{.ant-table .light{background-color: white;}.ant-table .dark{background-color: rgb(240, 240, 241);}}

这样才能将样式修改，顺带提一嘴，如果是css/less设置了scoped，可以在样式名字前面加/deep/，即使用穿透的写法来更改子组件样式。

/deep/ .ant-talbe .light{background-color: white;}

以上便是个人一点小小总结，如有错误，感谢指正！