多选树形表格示例

完整代码

<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 ##

2023/09/25
发现回显有bug，数据为一级时，element会自动勾选子选项
目前解决方法:

const arr = ref([
  { id: 1, name: '节点1', description: '这是子节点1的描述' },
  //{ id: 1, name: '子节点1-1', description: '这是子节点1-1的描述' },
  { id: 6, name: '子节点2-2', description: '这是子节点2-2的描述' },
]);
const options = [...arr.value]; // 假设是请求来需要回显的数据
const selectItem = () => {
  arr.value.forEach((item) => {
    const itemToSelect = findItemInTree(treeData.value, item.id);
    // 加判断解决undefined挂载错误提示
    if (itemToSelect) {
      treeTable.value.toggleRowSelection(itemToSelect, true);
      if (itemToSelect.children) {
        itemToSelect.children.forEach((item) => {
          const tableItem = findItemInTree(treeData.value, item.id); // 找到table中的数据项
          const flag = options.some((one) => one.id === tableItem.id); // 在可选项里是否存在
          if (!flag) treeTable.value.toggleRowSelection(tableItem, false); // 如果不存在则不选中
        });
      }
    }
  });
};

element-plus 多选树形表格 回显

多选树形表格示例

注意点

element-plus 多选树形表格回显