element UI 树形表格展开至指定层级(半懒加载方式)
需求:
数据量较大,要求展开树(至少展开至某一层,即使使用根据Id展开的default-expanded-keys这个参数,页面渲染也是很卡)
总体思路:
- 先在后端获取需要展开的层级,组成树形数据发送给前端,然后前端全部展开(这里后端需要处理该树最后一层是否是叶子节点,做好标记),点击所显示的树的叶子节点时再进行懒加载
未解决问题:因为设置了全部展开,所以指定层级前面的三角展开符号是展开的,不影响懒加载
<el-table :data='treeData'
row-key="id"
highlight-current-row
default-expand-all
stripe
lazy
:load="load"
@row-click='selectRow'
:height="viewContentHeight"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
</el-table>
// 方法
//设置表格树形结构前面的三角展开符号(需要在懒加载之前执行)
treeData.forEach(item => {
this.setHasChildren(item)
})
// 遍历树形结构
setHasChildren (treeData) {
//我这里是用children来做该节点是否有孩子的标志,bool类型
if (treeData.children && !(treeData.children instanceof Array)) {
treeData.hasChildren = true
} else {
if (treeData.children instanceof Array) {
treeData.children.forEach(item => {
this.setHasChildren(item)
})}}},
*//懒加载部分*
load (tree, treeNode, resolve) {
// 发送请求向后端继续获取数据
getTreeChildren(/*这里是请求参数*/).then(res => {
if (res.success) {
let result = []
result = res.result
if (result.length > 0) {
result.forEach(item => {
if (item.children) {
// 设置前面的三角展开符号(我这里还是用children来做该节点是否有孩子的标志,bool类型)
item.hasChildren = true}})}
resolve(result)}})},
// 最初渲染的表格源树形数据(懒加载之前)
treeData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
children:true
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
children:true
}]
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]