element UI 树形表格展开至指定层级(之后的层级采用懒加载方式显示)

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 弄'
    }]