vue3 useTable获取选中的行

要获取选中的行，你可以使用 Vue 3 和 `useTable` 配合使用，然后在表格组件中添加一个复选框列来实现选中行的功能。具体步骤如下：

1. 引入 `useTable` 和 `reactive`。

import { useTable } from 'vue-tables-3';
import { reactive } from 'vue';

2. 创建表格配置和表格数据。

const tableColumns = [
  { label: 'ID', field: 'id' },
  { label: '名称', field: 'name' },
  { label: '年龄', field: 'age' },
  { label: '邮箱', field: 'email' },
  { label: '', field: 'checkbox' },
];

const tableData = [
  { id: 1, name: '张三', age: 28, email: 'zhangsan@example.com' },
  { id: 2, name: '李四', age: 32, email: 'lisi@example.com' },
  { id: 3, name: '王五', age: 25, email: 'wangwu@example.com' },
  { id: 4, name: '赵六', age: 30, email: 'zhaoliu@example.com' },
];

3. 创建表格状态并初始化。

const tableState = reactive({
  selectedRows: [],
});

4. 创建表格实例。

const { rows, columns } = useTable(tableColumns, tableData);

5. 在表格组件中添加复选框列，并绑定选中状态。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.field">
          {{ column.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.email }}</td>
        <td>
          <input type="checkbox"
                 v-model="tableState.selectedRows"
                 :value="row.id">
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { useTable } from 'vue-tables-3';
import { reactive } from 'vue';

export default {
  setup() {
    const tableColumns = [
      { label: 'ID', field: 'id' },
      { label: '名称', field: 'name' },
      { label: '年龄', field: 'age' },
      { label: '邮箱', field: 'email' },
      { label: '', field: 'checkbox' },
    ];

    const tableData = [
      { id: 1, name: '张三', age: 28, email: 'zhangsan@example.com' },
      { id: 2, name: '李四', age: 32, email: 'lisi@example.com' },
      { id: 3, name: '王五', age: 25, email: 'wangwu@example.com' },
      { id: 4, name: '赵六', age: 30, email: 'zhaoliu@example.com' },
    ];

    const tableState = reactive({
      selectedRows: [],
    });

    const { rows, columns } = useTable(tableColumns, tableData);

    return { rows, columns, tableState };
  },
};
</script>

6. 获取选中行的数据。

const selectedRowData = tableData.filter(row => {
  return tableState.selectedRows.includes(row.id);
});
console.log(selectedRowData);

这样就可以通过 `tableState.selectedRows` 获取选中行的 ID，然后根据 ID 在表格数据中筛选出选中行的数据了。