Antd Vue table 设置rowClassName不生效的问题

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

使用 Antd Vue table 利用 rowClassName 自定义带斑马纹的表格，设置后并未生效

<a-table
    class="ant-table-striped"
    size="middle"
    :columns="columns"
    :dataSource="data"
    :rowClassName="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
    bordered
  />

<style scoped lang="less">
.ant-table-striped .table-striped td {
  background-color: #fafafa;
}
</style>

原因是这样的样式不能放在scoped中，应写在全局样式中

<style lang="less">
.ant-table-striped .table-striped td {
  background-color: #fafafa;
}
</style>

改成这样后样式生效

注意，这样可能会影响到其他组件中class为.ant-table-striped .table-striped td的样式