<el-table
:load="getChildren"
:data="tableList"
row-key="deptId"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
lazy
>
<script>
export default {
name: "Dept",
components: { Treeselect },
data() {
return {
loading: true,
deptList: [],
tableList: [],
lazyTreeNodeMap: new Map(),
page: 1,
size: 10,
total: 0,
}
},
created: {
this.getList();
try {
this.$refs['table'].store.states.lazyTreeNodeMap = {}
} catch (e) {
}
listDept(this.queryParams).then(response => {
this.deptList = response.data
this.tableList = this.mapChildren(this.deptList)
})
},
methods: {
getList() {
this.loading = true;
this.deptList = []
this.tableList = []
this.lazyTreeNodeMap = {}
try {
this.$refs['table'].store.states.lazyTreeNodeMap = {}
} catch (e) {
}
listDept(this.queryParams).then(response => {
this.deptList = response.data
this.tableList = this.mapChildren(this.deptList)
this.loading = false;
}).catch(() => {
this.loading = false
});
},
mapChildren(arr) {
const newArr = []
arr.forEach(item => {
const obj = item
if(item.children) {
if (!item.children.length) {
obj.hasChildren = false
} else {
this.lazyTreeNodeMap[item.deptId] = this.mapChildren(item.children)
obj.hasChildren = true
}
delete obj.children
}
newArr.push(obj)
})
return newArr
},
getChildren(tree, treeNode, resolve) {
resolve(this.lazyTreeNodeMap[tree.deptId] || [])
},
}
handleSizeChange(size) {
this.size = size
const start = 0 + (this.page - 1) * this.size
this.tableList = this.mapChildren(this.deptList).splice(start, this.size)
},
handleCurrentChange(page) {
this.page = page
const start = 0 + (this.page - 1) * this.size
this.tableList = this.mapChildren(this.deptList).splice(start, this.size)
},
}
</script>