1,懒加载需要属性

row-key=“id”
lazy:true
:load=“loadChildrenList”
:tree-props=“{children: ‘children’, hasChildren: ‘children’}”

<el-table
      :data="tableData"
      ref="singleTableRef"
      row-key="id"
      lazy
      :load="loadChildrenList"
      :tree-props="{children: 'children', hasChildren: 'children'}"
      :height="tableHeight"
      v-loading="loading"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
</el-table>

2,懒加载方法实现

// 懒加载树形表格
const resolveMaps = new Map()
const loadChildrenList = async (row, treeNode, resolve) => {
  resolveMaps.set(row.id, { row, treeNode, resolve })
  const { code, data = [] } = await projectGroupList({
    projectInfoId: projectInfoId.value,
    parentId: row.id
  })
  if (code === '0000'&&data.length > 0) {
    resolve(data)
  } else {
    resolve([])
    singleTableRef.value.store.states.lazyTreeNodeMap.value[row.id] = []
  }
}

const refresh = async (row = null) => {
  if (row && row.parentId !== '-1') {
    const currentMaps = resolveMaps.get(row.parentId)
    if (currentMaps) {
      const { row: parentRow, treeNode, resolve } = currentMaps
      loadChildrenList(parentRow, treeNode, resolve)
    } else {
      loadList()
    }
  } else {
    tableData.value = []
    loadList()
  }
}

3:懒加载时删除子级最后一条数据时页面不刷新问题处理

需要强制给该子级赋值为空页面才可同步生效

singleTableRef.value.store.states.lazyTreeNodeMap.value[row.id] = []
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐