vue3 antd table组件点击行变色问题

1.为table定义customRow和rowClassName，customRow为了选中行，rowClassName为了改变样式的函数，customRow和rowClassName可以去antd官方文档看

定义customRow，rowClassName函数

let selectedRowKeys = ref([]); //声明一个数组，在行点击函数里面用来存每一行数据的唯一标识id或者其//他参数
const rowClick = (record, index) => {
  return {
    onClick: (event) => {
      selectedRowKeys.value.length = 0; //函数运行之初就清空数组是为了保证里面就只有一个参数，这样在点击单元行的时候就不会同时出现两个单元行因为单击而变色，两个单元行都变色，而是始终保持table里面只有一个单元行因为被单击而变色
      selectedRowKeys.value.push(record.key); //将单击的该单元行的数据的唯一标识存入//selectedRowKeys  之中
      //console.log(selectedRowKeys);
      //console.log(record.key);
    }, // 点击行
  };
};

rowClassName函数

const setRowClassName = (record, index) => {
  //使用数组方法includes查看selectedRowKeys里面是否含有该唯一表示id，有则返回类名highlight
  //该处返回的类名指的是给点击的单元行添加类名
  if (selectedRowKeys.value.includes(record.key)) {
    console.log("aaaa");
    return "colorText";
  } else {
    return "";
  }
};

定义colorText样式

 :deep(.colorText) {
    background-color: rgba(24, 106, 172);
    //     pointer-events: none;禁止本身点击行的触发行为
  }

此时效果会有但是一闪而过 因为他本身的hover还在取消掉现在

  // 取消划入鼠标的背景颜色
  :deep(
      .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover
    ) {
    background: none;
  }