AntDesignVue的表格实现点击tr行特效显示

组件版本：3.x

antdv官网

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

---

涉及知识点：样式穿透 、 熟悉官方文档
可参考：vue样式穿透的几种方式

---

:row-class-name="(record,index)=>{ return record.id === selectIndex ?'litigationInfoListredRow':' '}"

点击属性

const selectIndex = ref(0);

表格点击

customRow用法

const customRow = record => {
  return {
    onClick: event => {
      selectIndex.value = record.id;
    }
  };
};

样式

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

补充样式：

:deep(.abc .ant-table-tbody > tr > td) {
	//去掉悬停时的背景颜色，你可以将其设置为 transparent 或者和页面背景颜色相同的颜色。
	background-color: transparent !important;
}