\arco-design-vue table每次rowclick,点击某一行的的时候哪一行的颜色变化,默认第一条

在 Arco Design Vue 的 Table 中，点击某一行时，该行的背景颜色会发生变化。要想在 Vue 中使用 Arco Design Vue 的 Table，需要在代码中引入相应的组件和样式，如下所示：

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

<script>
import { defineComponent, ref } from 'vue';
import { Table } from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

export default defineComponent({
  name: 'MyTable',
  components: {
    'a-table': Table,
  },
  setup() {
    const data = ref([
      {
        id: 1,
        name: 'John',
        age: 20,
      },
      {
        id: 2,
        name: 'Mary',
        age: 25,
      },
      {
        id: 3,
        name: 'Peter',
        age: 30,
      },
    ]);

    function handleRowClick(row) {
      selectedRowKeys.value = [row.id];
    }

    const selectedRowKeys = ref([1]);

    function getRowClassName(record, index) {
      if (record.id === selectedRowKeys.value[0]) {
        return 'selected-row';
      }
      return '';
    }

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
    ];

    return {
      data,
      columns,
      handleRowClick,
      getRowClassName,
      selectedRowKeys,
    };
  },
});
</script>

在上述代码中，我们首先引入了 Arco Design Vue 的 Table 组件和样式，然后定义了一个 `MyTable` 组件。在组件中，我们使用 `ref` 来定义了一个 `data` 变量，表示表格中的数据。然后，我们定义了一个 `handleRowClick` 函数，用于处理行的点击事件。每次点击行时，我们都会调用该函数，并将当前行的索引保存到 `selectedRowKeys.value` 中。此外，我们还编写了一个 `getRowClassName` 函数，用于获取每一行的类名。在该函数中，我们根据当前行的索引和选中的行的索引来判断该行是否被选中。如果是，则返回选中状态的类名，否则返回默认的类名。最后，我们将 `getRowClassName` 函数传递给 `row-class-name` 属性，以实现选中行的背景颜色变化。同时，我们使用 `@row-click` 属性来监听行的点击事件，并在事件处理函数中调用 `handleRowClick` 函数。需要注意的是，Arco Design Vue 的 Table 组件要求必须指定 `row-key` 属性，这里我们使用了 `row => row.id` 来指定每一行的唯一标识符。在组件中，我们还定义了 `columns` 变量，表示表格中的列。最后，我们将 `data`、`columns`、`getRowClassName`、`handleRowClick` 四个变量分别绑定到组件的相应属性和事件上。