element-plus 多选树形表格 回显

多选树形表格示例

完整代码

js 复制代码
<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、实现多选:

js 复制代码
<el-table-column type="selection" width="55"> </el-table-column>

3、拿到选项:

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

示例:

js 复制代码
<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

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

js 复制代码
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;
};
js 复制代码
使用:
假设请求来的数据为
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 ##
相关推荐
naice2 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼6 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin11 分钟前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗14 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀69628 分钟前
CSS-响应式布局
前端
三小河33 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法37 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku38 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69641 分钟前
2025-35st-w-日常开发总结
前端
我是日安43 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js