【Vue+Element UI】el_table 自动加载

最新推荐文章于 2024-07-26 20:46:33 发布

sailor_studio

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.4k

点赞数 1

分类专栏： VUE 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/sailor_studio/article/details/126769206

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目前可实现所有节点自动加载，但是数据加载完，三角并没有从loading变回三角，可能是因为我们系统自己封装组件的原因，现在需求取消了，先记录一下现状

界面：

VUE：主要是设置default-expand-all属性为true，指定expand-row-keys数组

<el-table
  ref="treeTable"
  :key="componentsKey"
  v-loading="dataListLoading"
  :data="dataList"
  lazy
  row-key="deptId"
  :check-box="isDeptAdminShow()"
  parent-child
  :load="load"
  :columns="columns"
  class="dept-tree-table"
  :expand-row-keys="expandRowKeys"
  :default-expand-all="true"
  @treeTableSelect="getTreeTableSelect"
>
</el-table>

JS:

data中声明
expandRowKeys: []

async load(tree, treeNode, resolve) {
      let params = { deptId: tree.deptId, deptName: this.deptName }
      const { data } = await getChildNodes(params) // 获取子节点
      if (data) {
          for (let item of data) {
              this.expandRowKeys.push(item.deptId)  //将需要展开的节点主键添加进去
          }
        return resolve(data)
      }
    },

//updated声明周期中调用点击方法
 updated(){
      this.arrowAll()
  },

//method中
//获取到页面元素  模拟点击可实现让树形表格展开
    arrowAll () {
            let expand = document.getElementsByClassName('el-icon-arrow-right')
        if (expand.length > 0) {
          for (let i = 0; i < expand.length; i++) {
              expand[i].click()
          }
        }
    }