需要lazy、 load 两个属性一起用 <el-tree:data="treeData":props="defaultProps":load="loadNode"@node-click="handleNodeClick"lazy> </el-tree> AI代码助手复制代码 data() {return{treeDataList: [],defaultProps: {id:'id',label:'name',children:'children',parentId:'parentId',isLeaf:false,// ...
1. 首先,根据文档,我们在<el-tree>中加入lazy 和:load="loadNode" 如下图: 2. 在methods中写一下这个方法,如下图 说明一下,上图中的node.level === 0 时,我们在里面请求根节点的树结构,如下图: 然后,node.level >= 1 就是去请求接下来的层级了,根据你点击的节点来请求相对应的树结构数据,如下图...
<el-tree :props="props" :load="loadNode" lazy></el-tree> 1. 懒加载—由于在点击节点时才进行该层数据的获取,默认情况下 Tree 无法预知某个节点是否为叶子节点,所以会为每个节点添加一个下拉按钮,如果节点没有下层数据,则点击后下拉按钮会消失。同时,你也可以提前告知 Tree 某个节点是否为叶子节点,从而避...
1//懒加载获取树形结构2loadNode(node, resolve) {3console.log(node, resolve);4if(node.level == 0) {//node其实是需要展开树节点,但是第一次的node是个无用的数据,可以认为这个node是element给我们创建的,判断的话,就是level等于05this.getTreeData(0, resolve);6}else{7this.getTreeData(node, resol...
// 第一步:根据删除按钮获得对应id,然后根据id递归更改对应树节点状态字段 // 第二步:把表格中的数据删除即可 removeRow(row) { // console.log("行数据", row.id); // 获取tree的所有的node节点数组(DOM节点),这里是两个数组,对应的就是西游记和三国演义的最外层的数组() let allNodesDom = this.$ref...
id: node.key, }; const res = await this.$api.getTreeChildData(params); return resolve(res.data); }, }, }; 思路分析 首先,使用el-tree树组件必须指定lazy和load属性 lazy告知树组件开启懒加载模式,加上即可 load绑定的是一个函数,这个函数主要是用来在页面初始化加载的时候,用于向后端发请求获取el...
:load="loadNode" node-key="id" ></el-tree> </template> export default { data() { return { treeData: [{ id: 1, label: 'Node 1', }], defaultProps: { children: 'children', label: 'label' } }; }, methods: { loadNode(node, resolve) { //在这里进行异步操作,比如从服务器获...
:load="loadNode" :props="defaultProps" @node-click="handleNodeClick" > </el-tree> </el-menu> </el-aside> </el-card> <el-card> <el-main style="height: 910px"> 右侧内容 </el-main> </el-card> </template> import { getAction...
load绑定的是一个函数,这个函数主要是用来在页面初始化加载的时候,用于向后端发请求获取el-tree的树结构的数据的。页面初始化加载,load绑定的函数会自动执行 注意,如果树组件开启了懒加载模式,就不用在el-tree组件标签中写:data="data属性了,因为load绑定的函数,有两个参数,node和resolve,node是树节点,而resolve又...
html部分:重点是node-key="orgCode",@check="checkChange",lazy,ref="tree",:load="loadNode",结合输入...