在新增下级的时候怎么拿到懒加载的数据 百度的方法都试了 不知道哪里出了问题,请教各位前端铅笔们
参考以下,同学
(1) ElementUI 树形表格懒加载-新增修改删除等操作 https://blog.csdn.net/Yzt_199626/article/details/117171822
(2) el-table异步树形表格与数据懒加载 - 潇湘羽西 https://www.cnblogs.com/steamed-twisted-roll/p/16022781.html
(3) el-table懒加载实现添加下级、编辑、删除更新页面 https://blog.csdn.net/weixin_46151381/article/details/121697264
如果数据不多且网速较好的情况下,可以预加载缓存所有数据进行逐条显示,
如果数据较多的情况下对请求的数据划分,即多次少量的请求,这分两种情况,如果用的是自己的拟数据库,可以添加‘组’即多少条一组,通过路由传参换组显示,如用的后端数据库则先用postman测试一下上述方法是否可行,不行的话限则在请求数据时进行处理,axios有一个超时处理(应该是叫timeout)。可以通过这个进行懒加载
https://element.eleme.cn/#/zh-CN/component/tree
官方文档都有的,结合load、rendContent方法可以做到。
<el-tree
:props="props"
lazy
show-checkbox
:load="loadNode"
:expand-on-click-node="false"
:render-content="renderContent"
>
</el-tree>
// 数据初始化
props: {
// label: 'name',
// children: 'zones',
isLeaf: 'leaf'
},
tree: [
{
id: 1,
label: '一级 1',
children: []
}
],
id: 2
loadNode(node, resolve) {
console.log(node)
if (node.level === 0) {
return resolve(this.tree);
}
return resolve(node.childNodes);
},
append(data) {
this.id++;
const newChild = { id: this.id, label: this.id, children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button size="mini" type="text" on-click={() => this.append(data)}>Append</el-button>
<el-button size="mini" type="text" on-click={() => this.remove(node, data)}>Delete</el-button>
</span>
</span>);
}