高效开发：Vue 3 之 el-table 单选、默认选中及多选

Vue 3 中的 el-table 单选、默认选中和多选

单选

在 Vue 3 中，el-table 组件提供了单选功能，允许用户在表格中选择单行数据。这在需要从表格中获取单条记录的场景中非常有用。

实现单选功能非常简单。首先，导入 el-table 组件：

import { ElTable, ElTableColumn } from 'element-plus';

然后，在你的 Vue 组件中使用 el-table 组件，并添加一个 type="selection" 的列：

<el-table :data="tableData">
  <el-table-column type="selection" width="55"></el-table-column>
  <!-- 其他列... -->
</el-table>

最后，在 data() 函数中定义 tableData 数据模型，并在 methods() 函数中定义一个 handleSelectionChange 方法来处理单选操作：

data() {
  return {
    tableData: [
      { id: 1, name: 'John Doe', age: 25 },
      { id: 2, name: 'Jane Smith', age: 30 },
      // ...
    ]
  };
}

methods: {
  handleSelectionChange(selection) {
    this.selectedData = selection;
  }
}

将 handleSelectionChange 方法绑定到 el-table 组件，就可以在用户选择一行时获取选中的数据了：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <!-- ... -->
</el-table>

默认选中

在某些情况下，我们需要在表格加载时默认选中某一行数据。el-table 组件提供了 default-selected-row 属性，可以实现此功能。

要实现默认选中功能，只需要在 el-table 组件中添加 default-selected-row 属性，并设置其值为要默认选中的数据的 id 或 index：

<el-table :data="tableData" default-selected-row="1">
  <!-- ... -->
</el-table>

多选

el-table 组件还支持多选功能，允许用户在表格中选择多行数据。这在需要从表格中获取多个记录的场景中非常有用。

实现多选功能与单选功能类似。首先，在 el-table 组件中添加 type="selection" 属性，然后在 methods() 函数中定义一个 handleSelectionChange 方法来处理多选操作：

<el-table :data="tableData" type="selection">
  <!-- ... -->
</el-table>

methods: {
  handleSelectionChange(selection) {
    this.selectedData = selection;
  }
}

将 handleSelectionChange 方法绑定到 el-table 组件，就可以在用户选择多行时获取选中的数据了：

<el-table :data="tableData" @selection-change="handleSelectionChange" type="selection">
  <!-- ... -->
</el-table>

常见问题解答

• 如何取消单选或多选？

要取消单选或多选，只需将 selectedData 数据模型重置为空数组即可。

• 如何获取选中的数据？

选中的数据存储在 selectedData 数据模型中。可以在 handleSelectionChange 方法中获取它。

• 如何禁用单选或多选？

要禁用单选或多选，只需将 el-table 组件的 selectable 属性设置为 false 即可。

• 如何设置默认选中的多行数据？

要设置默认选中的多行数据，可以使用 default-selection 属性。该属性接受一个数组，其中包含要默认选中的数据的 id 或 index。

• 如何监听表格中数据的变化？

可以使用 watch 属性监听表格中数据的变化。例如，以下代码监听 tableData 数据模型的变化：

watch: {
  tableData: {
    handler(newVal, oldVal) {
      // 数据发生变化时的处理逻辑
    },
    deep: true
  }
}