2023年6月22日发(作者：)

element-ui树形表格懒加载⼿风琴模式拖动排序⼿风琴模式实现的效果： 其中⼀个节点展开时，其他节点关闭，⼀直保持最多只有⼀个节点是展开的。需要解决的问题： element-ui 树形懒加载表格⾃带的节点展开时，默认只有第⼀次才会触发load函数，之后在重新展开节点时，并不会触发load函数。实现原理：同⼀个的节点多次重复操作展开⼦节点时只触发⼀次load加载函数。当⼀个节点的⼦节点展开时，其他节点的⼦节点收起，同时新展开的节点都需要触发load函数⼿风琴模式： 根据element-ui⽂档创建树形表格row-key ： ⽤来优化 Table 的渲染；在使⽤ reserve-selection 功能与显⽰树形数据时，该属性是必填的lazy ： 开启懒加载模式tree-props ：指定哪些⾏是包含⼦节点load ：绑定节点加载函数需要显⽰为⼿风琴模式，重点的代码是 this.$nextTick() 中的函数：this.$ta 获取所有⽗节点的状态重新设置加载状态（这⾥是加载防⽌异常所以设置）(ta[], ‘loading’, false)重新设置节点未加载（⼿风琴重点代码，使load函数能够多次触发，解决了load不能多次触发的问题）(ta[], ‘loaded’, false)关闭已经打开的⼦节点 （expanded 为true 表⽰⼦节点展开， false 表⽰⼦节点关闭）(ta[], ‘expanded’, false)⼿风琴模式下的表格拖动排序安装拖动插件

npm install sortablejs --save在页⾯中引⼊import Sortable from ‘sortablejs’