element-plus 多选树形表格 回显

多选树形表格示例

完整代码

<template>
  <div>
    <h1>多选树形表格示例</h1>

    <el-table
      ref="treeTable"
      :data="treeData"
      style="width: 100%"
      :row-key="(row) => row.id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
    </el-table>

    <div>
      <h2>已选择的项：</h2>
      <ul>
        <li v-for="item in selectedItems" :key="item.id">{{ item.name }} - {{ item.description }}</li>
      </ul>
    </div>

    <!-- 添加按钮来选中特定数据项 -->
    <button @click="selectItem">选中子节点2-1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const treeData = ref([
  {
    id: 1,
    name: '节点1',
    description: '这是节点1的描述',
    children: [
      {
        id: 2,
        name: '子节点1-1',
        description: '这是子节点1-1的描述',
      },
      {
        id: 3,
        name: '子节点1-2',
        description: '这是子节点1-2的描述',
      },
    ],
  },
  {
    id: 4,
    name: '节点2',
    description: '这是节点2的描述',
    children: [
      {
        id: 5,
        name: '子节点2-1',
        description: '这是子节点2-1的描述',
      },
      {
        id: 6,
        name: '子节点2-2',
        description: '这是子节点2-2的描述',
      },
    ],
  },
]);

const selectedItems = ref([]);

const handleSelectionChange = (selection) => {
  selectedItems.value = selection;
};

// 获取表格引用
const treeTable = ref();

const selectItem = () => {
  // 找到子节点2-1的数据项
  const itemToSelect = findItemInTree(treeData.value, 5);
  console.log('e', itemToSelect);
  // 使用toggleRowSelection方法选中或取消选中
  treeTable.value.toggleRowSelection(itemToSelect,true);
};
// 递归查找children中有没有符合的目标
const findItemInTree = (tree, itemId) => {
  for (const item of tree) {
    if (item.id === itemId) {
      return item;
    }
    if (item.children) {
      const found = findItemInTree(item.children, itemId);
      if (found) {
        return found;
      }
    }
  }
  return null;
};
</script>

<style></style>

注意点

1、设置 row-key：

对于树形表格，需要为每个数据项提供一个唯一的 row-key。可以使用数据项的 id 作为 row-key，确保每个数据项都有一个唯一的标识符。在示例表格中，添加 row-key 属性并指定 id 或其他唯一标识符的属性名：

2、实现多选：

<el-table-column type="selection" width="55"> </el-table-column>

3、拿到选项：

在el-table上添加 @selection-change="handleSelectionChange"

示例：

<div>
      <h2>已选择的项：</h2>
      <ul>
        <li v-for="item in selectedItems" :key="item.id">{{ item.name }} - {{ item.description }}</li>
      </ul>
 </div>

const selectedItems = ref([]);

const handleSelectionChange = (selection) => {
  selectedItems.value = selection;
};

4、回显选项：

element 提供了toggleRowSelection

假设要选中id为5的项
const itemToSelect = findItemInTree(treeData.value, 5);

const selectItem = () => {
  // 找到子节点2-1的数据项
  const itemToSelect = findItemInTree(treeData.value, 5);
  console.log('e', itemToSelect);
  // 使用toggleRowSelection方法选中或取消选中
  treeTable.value.toggleRowSelection(itemToSelect,true);
};

// 递归查找children中有没有符合的目标
const findItemInTree = (tree, itemId) => {
  for (const item of tree) {
    if (item.id === itemId) {
      return item;
    }
    if (item.children) {
      const found = findItemInTree(item.children, itemId);
      if (found) {
        return found;
      }
    }
  }
  return null;
};

使用：
假设请求来的数据为
const arr = ref([
    { id: 2, name: '子节点1-1', description: '这是子节点1-1的描述' },
    { id: 3, name: '子节点1-2', description: '这是子节点1-2的描述' }
 ])
 
 arr.value.modules.forEach((row) => {
    const itemToSelect = findItemInTree(treeData.value, row.Id);
    treeTable.value.toggleRowSelection(itemToSelect,true);
  });
  
 // ## treeTable.value是 el-table的ref ##