ant design vue利用rowClassName给table添加行样式

目录

1. 需求：表格每行数据hasVerdict值不为’1’时标红显示

2. 实现方式：table属性rowClassName

html部分代码

<a-table
      ref="table"
      :row-key="record => record.contractNo"
      :columns="columns"
      :data-source="listData"
      :loading="listLoading"
      :pagination="listPagination"
      :row-class-name="isRedRow"
></a-table>

script部分代码

isRedRow (record, index) {
      if (record.hasVerdict !== '1') {
        return 'litigationInfoListredRow'
      } else {
        return ''
      }
}

style部分代码

<style lang="less" scoped>
.litigationInfoListredRow {
  color: red
}
</style>

3. 问题：样式未生效

查看源码，该类名已经添加到相应的表格行上

但是，实际styles并没有相应的样式

4. 解决方案

4.1 方案一：删除scoped

实际styles出现相应的样式

此方案缺点：scoped去除后，添加了全局样式类litigationInfoListredRow，易造成全局数据污染

4.2 方案二：样式穿透

style部分代码

<style lang="less" scoped>
/deep/ .litigationInfoListredRow {
  color: red
}
</style>

此时，实际styles也出现相应的样式

5. 总结

scoped属性的效果是给该组件根部添加一个随机的属性，如方案二图中的[data-v-9c0a933a]，编译时css类也会加上该属性，使得该样式只作用于当前组件。因此，在使用scoped的前提下，类名前添加 /deep/ 相当于样式从该组件根部穿透到类litigationInfoListredRow，若不使用样式穿透，相当于litigationInfoListredRow直接修改ant design内部封装的组件样式：ant-table-row、ant-table-row-level-0, 但当前ant-table-row，ant-table-row-level-0类有scoped带来的属性值[data-v-9c0a933a],导致修改样式失败， 更加直观的测试：在table上添加类‘abc’

html代码:

<a-table
      ref="table"
      :row-key="record => record.contractNo"
      :columns="columns"
      :data-source="listData"
      :loading="listLoading"
      :pagination="listPagination"
      :row-class-name="isRedRow"
      class="abc"
></a-table>

style代码：

<style lang="less" scoped>
.abc /deep/ .litigationInfoListredRow {
  color: red
}
</style>

样式：

此时，abc类带有属性，可以实现样式穿透。样式穿透改变的是ant design框架封装的组件样式，/deep/前不能再是ant design封装的组件，那样无法找到，不知从何处穿透。比如style代码改成：

<style lang="less" scoped>
.ant-table-tbody /deep/ .litigationInfoListredRow {
  color: red
}
</style>

此时是无效的