vue3 elementplus el-table toggleRowSelection使用方法

基础使用步骤

设置表格与引用 ：在你的模板中，为 el-table 设置 ref，并确保已包含 type="selection" 的列

html 复制代码

<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" />
  <!-- 其他列 -->
</el-table>

操作选中状态 ：通过 ref 获取表格实例，并调用 toggleRowSelection 方法

javascript 复制代码

// 在脚本中
import { ref } from 'vue';

const multipleTableRef = ref(); // 获取表格的ref

// 切换某一行的选中状态（不传第二个参数，则自动切换）
const toggleRow = (row) => {
  multipleTableRef.value.toggleRowSelection(row);
};

// 明确设置某一行为选中状态
const selectRow = (row) => {
  multipleTableRef.value.toggleRowSelection(row, true);
};

// 明确取消某一行的选中状态
const deselectRow = (row) => {
  multipleTableRef.value.toggleRowSelection(row, false);
};

应用场景

单击行选中 ：结合 el-table 的 row-click 事件，实现点击表格行即可选中或取消选中该行

html 复制代码

<el-table 
  ref="multipleTableRef" 
  :data="tableData" 
  @row-click="handleRowClick"
>
  <!-- 表格列 -->
</el-table>

javascript 复制代码

const handleRowClick = (row) => {
  // 点击行时，切换该行的选中状态
  multipleTableRef.value.toggleRowSelection(row);
};

设置默认选中 ：当数据加载后，例如从接口获取到 tableData，你可以在下一个 DOM 更新周期后，通过 toggleRowSelection 设置某些行默认选中

javascript 复制代码

import { nextTick } from 'vue';

// 假设从接口获取了数据
tableData.value = await fetchData();

nextTick(() => {
  // 遍历数据，对符合条件（例如 item.condition 为 true）的行设置选中
  tableData.value.forEach(item => {
    if (item.condition) {
      multipleTableRef.value.toggleRowSelection(item, true);
    }
  });
});

注意：使用 nextTick 确保 DOM 已更新 ，从而能正确设置选中状态-8。
实现反选功能：遍历所有表格数据，切换每一行的选中状态

javascript 复制代码

const invertSelection = () => {
  tableData.value.forEach(item => {
    // 获取当前行的选中状态可能需要你自己维护，或通过 selection-change 事件获取的数组判断
    // 这里是一个简化的例子：直接切换当前状态
    multipleTableRef.value.toggleRowSelection(item);
  });
};

实现单选功能 ：在 @selection-change 事件中，确保只保留最新选中的一行
*

javascript 复制代码

const handleSelectionChange = (val) => {
  // 如果选中了多行，取消之前所有行的选中，只保留最后一行
  if (val.length > 1) {
    const lastSelectedRow = val[val.length - 1];
    // 取消所有行的选中状态
    multipleTableRef.value.clearSelection();
    // 重新设置最后一行为选中状态
    multipleTableRef.value.toggleRowSelection(lastSelectedRow, true);
  }
};