ant design vue table表格组件实现隔行变色
一、使用方法
- html代码:
<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是表格中改行数据下表ÿ