中国做室内设计的网站关键词搜索量查询
目录
- 一、出现场景
- 二、具体使用
- 三、修改时重新加载树节点
- 四、新增、删除重新加载树节点
一、出现场景
在项目的开发过程中，我们经常会使用到表格树的格式，但是犹豫数据较多，使用分页又不符合项目需求时，就需要对树进行懒加载的操作。
二、具体使用
<template>
<div><el-table:data="tableData1"style="width: 100%"row-key="id"borderlazy:load="load":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</div>
</template>
<script>export default {data() {return {tableData1: [{id: 1,date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: 2,date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {id: 3,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',hasChildren: true}, {id: 4,date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {load(tree, treeNode, resolve) {setTimeout(() => {resolve([{id: 31,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {id: 32,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}])}, 1000)}},}
</script>
三、修改时重新加载树节点
this.currentRow：在修改时选中的数据
this.form：修改之后的数据
Object.assign(this.currentRow, this.form);
四、新增、删除重新加载树节点
在新增和修改的时候重新加载树节点，我这里提供的是重新加载整个树节点，如何修改缓存还没有很好的方法，网上查询了一些例子也没有实现，哪位大佬有好的解决方案一块分享一下的，万分感谢！！！