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 ##
相关推荐
爱隐身的官人26 分钟前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML1 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
烛阴4 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者4 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
vivi_and_qiao4 小时前
HTML的form表单
java·前端·html
骑驴看星星a5 小时前
Vue中的scoped属性
前端·javascript·vue.js
四月_h5 小时前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_427506085 小时前
vue3写一个简单的时间轴组件
前端·javascript·vue.js
雨枪幻。6 小时前
spring boot开发:一些基础知识
开发语言·前端·javascript
lecepin7 小时前
AI Coding 资讯 2025.8.27
前端·ai编程