本文主要是介绍vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1
找到属性标签添加 lazy 和 :load="loadNode" 这两个属性
2
引入树形接口,并和后端约定好传值,(拿我的举例
第一次获取全部父级默认第一次传参数:{ parentId : 0},可获取全部父级
第二次通过点击的子级把子级id传进去,这一步就用到了:load="loadNode" 这个方法,完全自动把子级放到对应的父级上去)
第三和后端沟通好每一层里给你带leaf:true(是最后一层)或leaf:false(不是最后一层) 我这里用的是树状表格的接口 所以在方法里循环转换了一下值 但是结果和原理不变
[这个值可以控制树🌲形结构前边的"三角"或"+"显示不显示的],就是可以看到是不是最后一级,还能不能打开
import { treeselect } from '@/api/system/123/456/dept' //引入的接口
3
data里添加对应值
下边是代码:懒得写的可以复制字段值
// 部门树选项deptOptions: undefined,defaultProps: {children: 'children',label: 'label',isLeaf: 'leaf'},4
先获取全部父级 并循环付给对应值 (如果能和后端商量好字段可能不用前端forEach循环赋值)
/** 查询部门下拉树结构 */getTreeselect() {treeselect({parentId:0}).then((response) => {this.deptOptions = response.datathis.deptOptions.forEach(item=>{item.leaf = !item.hasChildrenitem.label = item.deptName})})},提醒 在这里别忘了把方法夹到created()里
created() {this.getTreeselect()},5
懒加载方法node.level === 0的时候添加获取父级的接口,node.level === 1的时候把子级ID传进去
resolve(response.data) 就自动把获取的子级放到对应的位置了
loadNode(node, resolve) {if (node.level === 0) {treeselect({ parentId : 0}).then((response) => {response.data.map(item=>{item.leaf = !item.hasChildrenitem.label = item.deptName})resolve(response.data);})}if (node.level >= 1){setTimeout(() => {treeselect({ parentId : node.data.deptId}).then((response) => {response.data.map(item=>{item.leaf = !item.hasChildrenitem.label = item.deptName})resolve(response.data);})}, 500);};},6
赠送内容 添加搜索 和后端约定好不传parentId只传参数 返回对应值
<el-inputv-model="deptName":placeholder="请输入参数"clearablesize="mini"style="margin-bottom: 20px"></el-input>然后watch监听这个参数
watch: {// 根据名称筛选部门树deptName(val) {this.deptOptions =[]if(val){var objquery = {deptName : val,}treeselect(objquery).then((response) => {response.data.map(item=>{item.leaf = !item.hasChildrenitem.label = item.deptName})this.deptOptions = response.datathis.$refs.tree.filter(response.data[0].deptName)})}else{this.getTreeselect()}},这篇关于vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
