vue ts里arco-design table每次处罚rowclick,点击某一行的的时候哪一行的颜色变化

在Ant Design Vue的Table组件中，可以通过设置rowClassName属性来控制每一行的类名，从而改变行的样式。在Vue TypeScript中，可以通过设置data中的currentRow属性来记录当前选中的行，并在rowClassName中根据该属性来动态添加类名。

以下是一个示例代码：

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :row-key="record => record.id"
    :row-class-name="getRowClassName"
    @row-click="handleRowClick"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Table } from 'ant-design-vue';

export default defineComponent({
  components: { 'a-table': Table },
  data() {
    return {
      dataSource: [
        { id: 1, name: 'John', age: 18 },
        { id: 2, name: 'Lucy', age: 20 },
        { id: 3, name: 'Tom', age: 22 }
      ],
      currentRow: null
    };
  },
  methods: {
    handleRowClick(row) {
      this.currentRow = row;
    },
    getRowClassName(record, index) {
      return record === this.currentRow ? 'selected-row' : '';
    }
  }
});
</script>

<style scoped>
.selected-row {
  background-color: #e6f7ff;
}
</style>

在这个例子中，我们设置了Table组件的columns、dataSource、rowKey和rowClassName属性。在data中，我们定义了dataSource和currentRow两个数据变量，其中currentRow用于记录当前选中的行。在方法中，我们定义了handleRowClick方法来处理行点击事件，并将当前行赋值给currentRow；同时，我们定义了getRowClassName方法来返回每一行的类名，如果该行是当前选中的行，则添加类名 "selected-row"。最后，在样式中，我们定义了选中行的样式。

当用户点击某一行时，该行会被选中，并且样式会发生变化。如果用户再次点击该行或点击其他行，则对应的样式会切换。