ant-design-vue 2.0 a-table 中实现特殊行样式，选中样式，鼠标悬浮样式不一样

最新推荐文章于 2026-07-04 15:58:22 发布

原创最新推荐文章于 2026-07-04 15:58:22 发布 · 357 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

第一个是带选择框的a-table 使用如下方式实现:
rowClassName 属性可以传入自定义class

 <a-table
            ref="table"
            size="middle"
            bordered
            :scroll="scroll"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{ selectedRowKeys: selectedRowKeys,onChange: onSelectChange  }"
            :rowClassName="rowClassName"
          ></a-table>

这个rowClassName放在method属性中实现返回，代码如下：

    rowClassName(record) {
      if (record.status === 2 || record.status === 5) { //销户或者后面的拉黑
        return 'highlight-row'
      } else if (record.status === 4 || record.status === 3) { //报停或者未开户
        return 'warning-row'
      }
      return ''
    },

然后less样式中如下进行调整
注意一定要deep穿透

/deep/ .highlight-row {
  background-color: lightcoral !important;
  //实现悬浮样式修改
  &.ant-table-row-hover > td,
  .ant-table-tbody > tr.ant-table-row-hover > td,
  .ant-table-thead > tr:hover > td,
  .ant-table-tbody > tr:hover > td {
    background: #e41d1d !important;
  }
  // 实现选中样式修改
  &.ant-table-row-selected td {
    background: lightcoral !important;
  }
}

/deep/ .warning-row {
  background: yellow !important;
  &.ant-table-row-hover > td,
  .ant-table-tbody > tr.ant-table-row-hover > td,
  .ant-table-thead > tr:hover > td,
  .ant-table-tbody > tr:hover > td {
    background: #e3e31d !important;
  }
  &.ant-table-row-selected td {
    background: #f3f3aa !important;
  }
}

第二种当table是一个可以展开的多级table的时候，控制台查看元素发现，悬浮没有.ant-table-row-hover的class出现就需要使用如下方式实现，悬浮样式调整：

注意一定要deep穿透

/deep/ .highlight-row {
  background: lightcoral !important;
}

/deep/ tr.ant-table-row.highlight-row:hover > td{
  background: #e41d1d !important;
}

标签

#vue.js #javascript #前端