element-plus的table表格懒加载实现(懒加载时删除子级最后一条数据时页面不刷新问题处理)
element-plus的table表格懒加载实现(懒加载时删除子级最后一条数据时页面不刷新问题处理)
·
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] = []
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐



所有评论(0)