element-ui 表格树数据显示

小咪咪 2023-06-27 03:12 10阅读 0赞

1.使用表格树，element-ui比较新的版本开始支持，最新的版本却在报错，不识别树结构的几个属性

在用为2.8.2版本，可实现下面树形数据显示和懒加载：

<el-table
                               :data="tableData"
                               @selection-change="selectionChange"
                                <%--:max-height="tableHeight"--%>
                               border
                               row-key="id"
                               default-expand-all
                               lazy
                               :load="load"
                               :tree-props="{children: 'children',hasChildren: 'hasChildren'}">

注意添加属性：

row-key="id"
                               default-expand-all
                               lazy
                               :load="load"
                               :tree-props="{children: 'children',hasChildren: 'hasChildren'}"

其中属性：

lazy
                               :load="load"

用以实现懒加载，即点击下拉请求获取数据

tableData数据为表格数据，要显示节点数据，需要有hasChildren属性即可。

2.8.2不在支持表格流式高度属性：

max-height

需要注意！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FnX25ldmVyZ2l2ZXVw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FnX25ldmVyZ2l2ZXVw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200102140648161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FnX25ldmVyZ2l2ZXVw,size_16,color_FFFFFF,t_70