Element el-table树形数据 tree-props使用注意事项

林中明月间。

已于 2024-04-08 15:14:24 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2023-07-03 16:15:08 首次发布

原文链接：https://blog.csdn.net/Julia_0502/article/details/117488475

在使用ElementUI的el-table组件处理树形数据时，若设置了row-key为id并使用了tree-props，当父节点和子节点的id相同，会导致子节点错误地显示为可折叠的父节点。为避免此问题，应确保父节点和子节点的id是唯一的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element el-table树形数据 tree-props使用注意事项_Julia_0502的博客-CSDN博客

切记！！！

如果表格内部绑定了 row-key="id" 和 :tree-props

并且数据父亲的 id 跟儿子的 id 值是一样的那么儿子的那条数据也会出现相同的下拉控件图标

绑定row-key

<el-table :data="list" border style="width:100%" ref="elTable" :row-key="getRowKey" @selection-change="checkboxFun">

getRowKey(row){
    return row.wmId;
},

如下：

所以父亲id 与儿子id不能相同否则程序会误认为儿子也是父亲就会给加下拉的控件图标

在这里插入图片描述

children: [{id:38}] //只有子数据里面有id属性且有值才会显示折叠按钮、 children:null,children:[]均不会出现折叠按钮

tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [{id:38}] //只有子数据里面有id属性且有值才会显示折叠按钮
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          children:[{id:99}]
        }]

<el-table
            v-loading="loading"
            :data="typeList"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            @selection-change="handleSelectionChange"
>


 <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all //默认全部展开
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
   
  </el-table>