【Vue】element UI tree 控件,点击父节点进行异步加载

点击父节点,获取该节点的id,然后渲染成子节点,
目前id已获取,子节点数据也请求到了,不知道怎么渲染到该节点下面
看官方介绍有一个load参数--加载子树数据的方法,有没有用过的同志来指导一下怎么用
【Vue】element UI tree 控件,点击父节点进行异步加载

    <el-tree

:props="props1"

:load="loadNode1"

node-key="id"

ref="tree"

highlight-current

lazy

show-checkbox

@node-click="handleNodeClick">

</el-tree>

loadNode(node, resolve){

console.log(node);

// if (node.level === 0) {

// return resolve([{ name: 'region' }]);

// }

// if (node.level > 1) return resolve([]);

// setTimeout(() => {

// const data = [];

//

// resolve(data);

// }, 500);

},

getClickchild(id) {

alert(id)

axios.get('/api/bank/oprtion/oprtionList.do?id='+id)

.then(function(res) {

console.log(res.data)

loadNode

})

.catch(function(error) {

console.log(error)

})

},

handleNodeClick(data) {

// this.clickId = data.id

console.log(data.id);

this.getClickchild(data.id)

}}

回答

html:

<el-tree

:props="props"

:load="loadNode"

node-key="id"

ref="tree"

highlight-current

lazy

show-checkbox

@node-click="handleNodeClick">

</el-tree>

data:

props: {

label: 'indexName',

children: [],

isLeaf: 'leaf'

}

js:

// 异步树节点点击事件

handleNodeClick (data) {

console.log('node', data)

},

// 异步树叶子节点懒加载逻辑

loadNode (node, resolve) {

// console.log(node, resolve)

// 一级节点处理

if (node.level === 0) {

this.requestTree(resolve)

}

// 其余节点处理

if (node.level >= 1) {

// 注意!把resolve传到你自己的异步中去

this.getIndex(node, resolve)

}

},

// 异步加载叶子节点数据函数

getIndex (node, resolve) {

this.$AxiosAjax({

loading: true,

url: API_BASICQUOTA.getCatalogInfoByLevel,

params: {id: node.data.id, level: node.data.level + 1 + '', type: 'all'}

}).then(res => {

if (res.data.code === '200') {

// 处理节点是否是叶子节点

res.data.catalogInfo.forEach(et => {

if (et.isIndex === '1') {

et.leaf = true

} else {

et.leaf = false

}

})

let data = res.data.catalogInfo

console.log(data)

resolve(data)

}

})

},

// 首次加载一级节点数据函数

requestTree (resolve) {

this.$AxiosAjax({

loading: true,

url: API_BASICQUOTA.getCatalogInfoByLevel,

params: {id: '', level: '1', type: 'all'}

}).then(res => {

if (res.data.code === '200') {

// 处理节点是否是叶子节点

res.data.catalogInfo.forEach(et => {

if (et.isIndex === '1') {

et.leaf = true

} else {

et.leaf = false

}

})

let data = res.data.catalogInfo

resolve(data)

}

})

}

刚刚解决。
首先文档的setTimeout,其实就是异步加载;
还是上代码吧。
我用的axios,都一样。
例:

    loadNode(node, resolve) {

if (node.level == 1) {

console.log(node.data);

//注!把resolve传到你自己的异步中去

this.getUser(node.data.fence, node.data.id, resolve);

}

// setTimeout(() => {

// var data;

// if (hasChild) {

// data = [

// {

// name: "zone" + this.count++

// },

// {

// name: "zone" + this.count++

// }

// ];

// } else {

// data = [];

// }

// resolve(data);

// }, 500);

},

然后就是异步

//伪代码

getUser(node.data.fence, node.data.id, resolve){

axios.post().then(res=> {

let data = res.data;//改成tree需要的格式

resolve(data);//解决?

})

}

以上。
另外,element的文档确实有点问题啊。需要仔细领悟。

遇到同样的问题,找到解决的办法了吗

            treeProps: {

label: 'name',

children: [],

isLeaf: 'isLeaf'

},

'isLeaf' 在请求数据后我已经给它设置了true 但是,不显示下拉箭头啊 。所以我点击他也不会继续请求下一级 。怎么回事有人知道吗?
第二个问题 ,这里的children到底有什么用?为啥各位的demo都是把它设置为空数组?childen不应该是映射到树状图数据的具体字段吗?

那如果我执行增删改之后,要刷新某一级的树的数据,调接口重新获取,该怎么去调用
loadNode(node, resolve) {

  if (node.level === 0) {

Promise.all([this.getNodes("")]).then(function(res) {

resolve(res[0]);

});

} else if (node.level > 1) {

resolve([]);

} else {

Promise.all([this.getNodes(node.data.id)]).then(function(res) {

resolve(res[0]);

});

}

},

getNodes(id) {

return new Promise(function(resolve, reject) {

getBarndTree({

parentProductCategory: id

}).then(res => {

resolve(res);

});

});

},

怎么去传参?

异步加载的解决了吗?

以上是 【Vue】element UI tree 控件,点击父节点进行异步加载 的全部内容, 来源链接: utcz.com/a/74070.html

回到顶部