实现ElementUI中table组件懒加载效果,并默认展开第一行的数据。

Lito

一、添加相关属性
image.png
二、添加haschildren字段

1、通过map方法遍历数据,给需要懒加载的项添加hasChildren字段,Object.assign(item, { hasChildren: true }),
2、在load(tree, treeNode, resolve) {},发送需要懒加载的数据,其中tree可以拿到当前项的数据,点击'<'按钮,会自动加载load请求的数据。

三、默认展开第一行的懒加载数据

需求要求默认展开第一行懒加载的数据。

image.png

该按钮绑定有默认展开懒加载数据的点击事件:

image.png

编写触发点击函数
expandDef() {
  const els = document.getElementsByClassName('el-table__expand-icon')
  this.$nextTick(() => {
    // console.log('els[0]', els[0])
    els[0].click()
  })
},
该函数可在请求完外层数据后再触发该函数,之前看过其他文章说在生命周期beforeUpdate里触发,发现报错且多次被调用,遂尝试在请求完外层函数后再触发该函数,结果成功!

getVersion() {
  const params = {
    fromDate: this.fromToTime[0],
    toDate: this.fromToTime[1],
    phaseCode: this.selectedTerm,
    subjectCode: this.selectedSubject
  }
  getVersionDistribution(params).then(res => {
    this.learningVersion = res.data
    this.learningVersion = this.learningVersion.map(item => {
      return Object.assign(item, { hasChildren: true })
    })
    this.learningVersion = this.learningVersion.map(item => {
      return this.flattenObj(item)
    })
    // 默认展开第一行,利用模拟点击实现
    this.expandDef()
  })
},
阅读 3k
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏