ant design vue中table行点击变色

项目需求，采用ant design table展示数据，需要点击行变色，表格行之间有颜色区分

如图

参考官方文档中table属性

customRow
image.png
image.png

        :customRow="rowClick"
        :rowClassName="setRowClassName"

image.png

rowClick(record, index) {
        return {
          on: {
            click: () => {
              this.currentRow = record;//自己定义个变量，用于保存点击行的数据
            },
          },
        };
      },
        // 行样式设置
      setRowClassName(record, index) {
        // console.log(1111111)
        // console.log(record)
        // console.log(this.currentRow)
        // console.log(record.id === this.currentRow.id ? "对" : "错")
        let rowColor = (index % 2 === 0) ? "evenRowStyl" : "";//判断单双行，赋予不同样式
        return record.id === this.currentRow.id ? "clickRowStyl" : rowColor;//赋予点击行样式
      }

<style type="text/css">
  /*//点击行的样式*/
.clickRowStyl {
  background-color: #bbbbff !important;
}
/*//偶数行的样式*/
.evenRowStyl {
  background-color: #aad4fd46 !important;
}

.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
  background: #bbbbff;
}
/*//鼠标移入样式*/
.ant-table-tbody>tr:hover>td {
  background: #bbbbff !important
}

</style>

image.png

//自己定义个变量，用于保存点击行的数据

image.png