Element-UI 中 el-table 树形数据 tree-props使用避坑

在这里插入图片描述
element官网提示设置tree-props{children: 'children',hasChildren: 'hasChildren'},data数据需要设置childrenhasChildren属性,row-key也绑定了数据的唯一值变量id,但是树形结构就是出不来
在这里插入图片描述
在el-table中,支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。

设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。childrenhasChildren 都可以通过 tree-props 配置。

default-expand-all属性表示默认展开,不需要展开可以删除。row-key="id"row里面的属性有children字段(即数据里面需要有children字段) 是必须的,:tree-props="{children: 'children',hasChildren: 'hasChildren'}可有可无。

如果不是懒加载的话,后端不要设置hasChildren 这个属性,要不然不能树形显示;如果是懒加载,则需要设置hasChildren字段。

总结:如果想用树形结构,后端的字段名称必须为children,是固定的,其他名字不可以,例如sons,是无法显示树形结构的,否则就要在前端代码中配置defaultprops!

参考文献:https://www.cnblogs.com/pzw23/p/12058457.html
https://blog.csdn.net/Julia_0502/article/details/117488475

  • 10
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
如果您想要实现Element Table树形表格的拖动功能,可以考虑使用Vue.js框架并结合element-ui组件库,再使用一些自定义指令和事件来实现。 以下是一种实现方式: 1. 在Vue组件引入element-ui组件库,并在模板使用el-table组件,设置其tree-props属性为{children: 'children', hasChildren: 'hasChildren'},以支持树形结构。 2. 使用自定义指令v-draggable,在表格行上绑定该指令,使得行可以被拖动。 3. 监听el-table组件的row-drop事件,在该事件更新数据源,以实现拖拽行的排序。 下面是示例代码: ```html <template> <el-table :data="tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-drop="handleRowDrop" > <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <button v-if="scope.row.hasChildren" @click="toggleNode(scope.row)"> {{ scope.row.expanded ? '收起' : '展开' }} </button> </template> </el-table-column> <el-table-column label="拖动" width="80"> <template slot-scope="scope"> <div v-draggable class="drag-handle"> <i class="el-icon-s-grid"></i> </div> </template> </el-table-column> </el-table> </template> <script> import { directive } from 'vuedraggable' export default { directives: { draggable: directive }, data() { return { tableData: [ { name: '张三', age: 18, address: '北京市朝阳区', children: [ { name: '李四', age: 22, address: '北京市海淀区', children: [], hasChildren: false } ], hasChildren: true }, { name: '王五', age: 30, address: '上海市浦东区', children: [], hasChildren: false } ] } }, methods: { toggleNode(node) { this.$refs.table.toggleRowExpansion(node) }, handleRowDrop(event) { const { treeData, newIndex, oldIndex } = event // 更新数据treeData.splice(newIndex, 0, treeData.splice(oldIndex, 1)[0]) } } } </script> <style> .drag-handle { cursor: move; display: inline-block; padding: 5px; border: 1px solid #ccc; border-radius: 4px; text-align: center; } </style> ``` 在上面的代码,我们首先引入了vuedraggable库的directive指令,并将其作为自定义指令draggable注册到Vue实例。 在模板,我们将el-table组件的tree-props属性设置为指定的树形结构字段,以支持树形表格的展示。然后在拖动列使用v-draggable指令,使得行可以被拖拽。 最后,我们监听了el-table组件的row-drop事件,在事件更新数据源,以实现行的拖拽排序。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值