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 ##
相关推荐
一只韩非子3 分钟前
AI时代,程序员如何优雅地搞定页面设计?
前端·ai编程
新中地GIS开发老师8 分钟前
2025Mapbox零基础入门教程(14)定位功能
前端·javascript·arcgis·gis·mapbox·gis开发·地理信息科学
tager11 分钟前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
烛阴1 小时前
Int / Floor
前端·webgl
excel1 小时前
使用 PWA 时,为什么你必须手动添加更新逻辑,否则会报错?
前端
Moment1 小时前
Node.js 这么多后端框架,我到底该用哪个?🫠🫠🫠
前端·后端·node.js
尚学教辅学习资料1 小时前
SpringBoot3.x入门到精通系列: 2.3 Web开发基础
前端·springboot·web开发
han_1 小时前
前端遇到页面卡顿问题,如何排查和解决?
前端·javascript·性能优化
拾光拾趣录3 小时前
H5适配9大高频题连环炸!第3问90%人翻车?
前端·面试
拾光拾趣录3 小时前
给Electron-Claude应用构建全面的数据统计体系 - 从0到1的实践总结
前端·electron