elementUI中el-table树形与el-tree树形结构的一键折叠与展开.pdfVIP

elementUI中el-table树形与el-tree树形结构的⼀键折叠与展开 elementUI 中el-table 树形与el-tree 树形结构的⼀键折叠与展开 1.业务需求： vue项⽬，权限菜单管理中菜单table的树形结构，⼀般情况下如果使⽤的是elementUI那么可以使⽤⾥⾯el-table的树形结构，实际场 景需要⼀键折叠/展开功能。当选择上级⽬录时需要通过el-tree树形获取⽬录的树形结构，此时也需要⼀键折叠/展开功能。 2.需求分析： ⼀键折叠/展开功能就是点击它之后，如果他是所有展开的，那么让他所有折叠，反之让他所有展开。 3.解决⽅案el-table 树形： el-table树形结构的⼀键折叠/展开功能其实就是与el-table中的 toggleRowSelection ⽅法密切相关，但是它只是改变某⼀个节点的， 要改变所有节点的话那么就需要这样处理： 是否展开 展开与折叠切换 // table( ) handleExpand() { this.isExpand = !this.isExpand this.$nextTick(() = { this.forArr(this.tableData, this.isExpand) }) }, 遍历 // forArr(arr, isExpand) { arr .forEach(i = { ⽤于多选表格，切换某⼀⾏的选中状态，如果使⽤了第⼆个参数，则是设置这⼀⾏选中与否（ 为 // toggleRowExpansion(i, isExpand) selected true 则选中） this.$refs.tableData.toggleRowExpansion(i, isExpand) if (i.children) { this.forArr(i.children, isExpand) } }) }, 效果如下： 4.解决⽅案el-tree 树形 el-tree树形的⼀键折叠与展开其实是与store.nodesMap[treeData[i].key].expanded 属性密切相关的(此时注意：el-tree的node-key属性对 应的key值⼀定要唯⼀)，它是通过每⼀条树形数据的ID的expanded进⾏设置实现折叠与展开的,它的处理⽅法为： ⼀键折叠展开（这⾥的 变量需要绑定到 的 属性上） // / isExpand el-tree `default-expand-all` isExpandF() { this.isExpand = !this.isExpand this.expandFunc(this.LimitData) }, 遍历树形数据，通过设置每⼀项的 属性，实现展开与折叠 // expanded expandFunc(data) { data.forEach(item= { this.$refs.menutree.store.nodesMap[item.sysResourcesId].expanded = this.isExpand