element-ui table树形表格，数据设置了懒加载和默认展开后，展开数据没有加载出来

Question

参阅element的文档，设置默认展开项就是expand-row-keys,但是设置了以后点开弹框时树形表格得图标看上去是展开了，但是children没有加载出来的样子，还是需要点击图标才能加载。不知道是否是设置了懒加载的问题。

看调试工具里，defaultExpandKeys应该是传进去了的

但是，需要点击图标才会去加载子数据

相关代码：

<el-table
  ref="treetable"
  :data="dataOrgizationData"
  :expand-row-keys="defaultExpandKeys"
  :load="loadChildrenMethod"
  :tree-props="{children: 'children', hasChildren: 'hasChild'}"
  row-key="deptId"
  border
  lazy
>
  <el-table-column prop="deptName" width="170" label="机构名称" tree-node/>
  <el-table-column prop="BianzhiTotal" label="总编制数"/>
  <el-table-column prop="leaderBianzhiTotal" label="干部编制数"/>
  <el-table-column prop="fireManBianzhiTotal" label="消防员编制数"/>
  <el-table-column prop="subDeptTotal" label="总机构数"/>
</el-table>

methods: {
 loadChildrenMethod(tree, treeNode, resolve) {
  console.log('異步加載子节点')
  // 异步加载子节点
    getChildrenOrgizationInfo({ deptPid: tree.deptId }).then(res => {
      if (res.code === 200) {
        if (res.data.length > 0) {
          this.$set(res.data, 'hasChild', true)
          res.data.forEach(item => {
            getSubordinate({ deptId: item.deptId}).then(Subres => {
              const data = Subres.data
              if (data.fireManBianzhiTotal == null) { 
                this.$set(item, 'fireManBianzhiTotal', 0)
              } else {
                this.$set(item, 'fireManBianzhiTotal', data.fireManBianzhiTotal)
              }
              if (data.leaderBianzhiTotal == null) {
                this.$set(item, 'leaderBianzhiTotal', 0)
              } else {
                this.$set(item, 'leaderBianzhiTotal', data.leaderBianzhiTotal)
              }
              if (data.subDeptTotal == null) {
                this.$set(item, 'subDeptTotal', 0)
              } else {
                this.$set(item, 'subDeptTotal', data.subDeptTotal)
              }
              this.$set(item, 'BianzhiTotal',  data.fireManBianzhiTotal + data.leaderBianzhiTotal)
            })
            getChildrenOrgizationInfo({ deptPid: item.deptId }).then(res2 => {
              if (res2.data.length > 0) {
                this.$set(item, 'children', res2.data)
                this.$set(item, 'hasChild', true)
              } else {
                this.$set(item, 'hasChild', false)
              }
            })
          })
        }
        resolve(res.data)
      }else {
        this.$message.error(`${res.message}`)
      }
  })
 }

`
   watch: {
    dialogVisible(val) {
      if (val === true) {
        this.handleGetOrgizationInfo()
      }
    },
    deptId(val) {
      if (val) {
        let valtostring = val.toString()
        this.defaultExpandKeys.push(valtostring)
      }
    }
  },
  

Answer 1

参考了https://ostack.cn/q/10...。使用模拟点击实现
`

expandDef () {
  const els = this.$el.getElementsByClassName('el-table__expand-icon')
  for (let i = 0; i < els.length; i++) {
   els[i].click()
  }
}`

调用的时候放在beforeUpdate里了，在其他地方时会有els为undefined的情况。
`
beforeUpdate() {

this.expandDef()

},
`