使用 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的样式

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐