<el-scrollbar wrap-class="assets-tree" view-style="display: flex; flex-direction: column; width: 100%;height: 100%;" wrap-style="overflow-x: auto; ">
<el-tree ref="assetsTree" :data="assetDataList" :filter-node-method="filterNode" show-
checkbox node-key="id" :props=" defaultProps" lazy :load=" loadNode" :default-expanded-
keys="defaultExpandedKeys" @check="handleCheck" />
</el-scrollbar>
<script>
data(){
return {
checkassetTableData: [], // 反显||选中
defaultExpandedKeys: [],
}
}
loadNode(node, resolve) { //懒加载
var data = { templateId: this.formData.templateId, taskId: this.taskId }
if (node.level === 0) {
data.userId = this.userId
getListDataSourceInfo(data).then(res => {
var assetData = []
res.data.forEach(item => {
assetData.push({ name: item.name, id: item.id, children: [] })
})
this.assetDataList = assetData
resolve(res.data)
this.treeCheck(this.checkassetTableData, node.level)
})
}
if (node.level === 1) {
data.dataSourceId = node.data.id
getListTable(data).then(res => {
var childrenData = []
res.data.forEach(item => {
childrenData.push({ name: item.name, id: item.id, datasourceId: item.datasourceId })
})
node.data.children = childrenData
resolve(node.data.children)
this.treeCheck(this.checkassetTableData, node.level)
})
// 同时展开节点
if (!node.expanded) {
node.expanded = true
}
} else {
resolve([])
}
},
treeCheck(data, level) { // 反显
var levelnodeIds = []
var nodeIds = []
var checkData = []
data.forEach((item) => {
levelnodeIds.push(item.datasourceId)
if (item.tableIds.length > 0) {
item.tableIds.forEach((table) => {
nodeIds.push(table)
})
}
})
if (level === 0) {
checkData = levelnodeIds
} else {
checkData = nodeIds
}
this.defaultExpandedKeys = levelnodeIds
this.$nextTick(() => {
this.$refs.assetsTree.setCheckedKeys(checkData)
})
},
handleCheck(data) {
const checkeds = this.$refs.assetsTree.getCheckedNodes()
const halfNode = this.$refs.assetsTree.getHalfCheckedNodes()
halfNode.forEach((item) => {
checkeds.push(item)
})
// this.assetTableData = checkeds
this.checkassetTableData = this.getassetTableId(checkeds)
},
// 数组去重且重组为{ datasourceId: '', tableIds: [] }
// const arr = [
// { id: 2, name: 'qq', datasourceId: 1002 },
// { id: 1002, name: 'qq' },
// { id: 4, name: 'qq', datasourceId: 1003 },
// { id: 1003, name: 'qq' },
// { id: 3, name: 'qq', datasourceId: 1002 },
// { id: 1104, name: 'qq' },
// { id: 5, name: 'qq', datasourceId: 1003 },
// { id: 1, name: 'qq', datasourceId: 1002 }
// ]
getassetTableId(arr) {
const res = []
arr.forEach(item => {
const temp = {}
let isNewDatasource = true
if (item.datasourceId) {
const data = res.find(val => val.datasourceId === item.datasourceId)
if (data) {
data.tableIds.push(item.id)
isNewDatasource = false
} else {
temp.datasourceId = item.datasourceId
temp.tableIds = []
temp.tableIds.push(item.id)
}
} else {
const data = res.find(val => val.datasourceId === item.id)
if (data) {
isNewDatasource = false
} else {
temp.datasourceId = item.id
temp.tableIds = []
}
}
if (isNewDatasource && temp.datasourceId) {
res.push(temp)
}
})
return res
}
</script>
el-tree懒加载获取数据,反显,数据重组为特定格式{ datasourceId: ‘‘, tableIds: [] }
最新推荐文章于 2024-08-01 15:37:23 发布