:rowClassName = "rowClassName"
>
通过使⽤rowClassName属性动态绑定⼀个⽅法（引号内名字可以更改），该⽅法名需要返回⼀个字符串，在官⽹table表格API中可以到这个属性，官⽅给出类型为Function(record, index):string。record，index在下⾯解释，该类型即rowClassName绑定⼀个返回值为string类型的⽅法。
2. 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;
}
以上便是个⼈⼀点⼩⼩总结，如有错误，感谢指正！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
豫公网安备41160202000602
发表评论