avue-表格树的懒加载和局部刷新
<avue-crudref="crud":option="option":data="data"v-model="form":permission="permissionList":before-open="beforeOpen"@row-del="rowDel"@row-update="rowUpdate"@row-save="rowSave"@refresh-
·
<avue-crud
ref="crud"
:option="option"
:data="data"
v-model="form"
:permission="permissionList"
:before-open="beforeOpen"
@row-del="rowDel"
@row-update="rowUpdate"
@row-save="rowSave"
@refresh-change="refreshChangeY"
@tree-load="treeLoad">
</avue>
data:
maps: new Map(),
option:{
azy: true,
dialogWidth: '60%',
tree: true,
border: true,
index: true,
viewBtn: true,
refreshBtn: true, // 是否显示“刷新”按钮
columnBtn: true, // 是否显示“显隐”按钮
align: 'center',
column:[...]
}
methods:
treeLoad(node, child, resolve) { // 懒加载子级
const id = node.id
this.maps.set(id, { node, child, resolve }) // 将当前选中节点数据存储到maps中
fetchMenuTree(this.option.lazy, node.id).then(res => { // 请求接口查询子级
resolve(res.data.data)
})
},
updateTable() { // 在删除或者添加操作成功之后,调用此函数
this.maps.forEach((item, key) => {
const { node, child, resolve } = this.maps.get(key)
this.treeLoad(node, child, resolve)
})
}
更多推荐
已为社区贡献27条内容
所有评论(0)