场景:【用户管理】开始是: 部门选择在左边,选择某个部门,右边查询出的数据为该部门下
但是: 这里的用户数据是所有的,部门只在某个应用下才有的
点击左边选择部门
改为下拉选择,物流平台时,显示部门下拉选择
最后结果:
<template>
<!-- 当所属应用是平台时 -->
<el-select v-if="/platform/.test(listQuery.applicationKeyEqualTo)" v-model="deptName" placeholder="所属部门">
<el-option :value="deptsValue" style="height: auto">
<el-tree
ref="tree1"
node-key="id"
:data="deptsList"
default-expand-all
show-checkbox
check-strictly
:props="defaultProps"
:expand-on-click-node="false"
highlight-current
:filter-node-method="filterNode"
@check="deptNodeClick"
/>
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
deptName: '',
deptsValue: [],
deptsList: [],
},
methods: {
getDepts() { // 对tree数据的组装回调
reqForGet({}, `/auth/dept/alldept_tree`).then(response => {
this.deptsList = []
if (response.data !== undefined && response.data.length > 0) {
const oldData = response.data
for (let i = 0; i < oldData.length; i++) {
const current = oldData[i]
this.deptsList.push({ id: current.id, name: current.deptName, leaf: current.children.length === 0, children: [] })
if (current.children.length > 0) {
createData(current.children, this.deptsList[i]['children'])
}
}
}
})
function createData(data, data1) {
for (let i = 0; i < data.length; i++) {
const current = data[i]
data1.push({ id: current.id, name: current.deptName, leaf: current.children.length === 0 })
data1[i]['children'] = []
if (current.children !== null && current.children.length > 0) {
createData(current.children, data1[i]['children'])
}
}
}
},
deptNodeClick(data) {
this.$refs.tree1.setCheckedNodes([{
id: data.id,
label: data.name
}])
this.deptsValue = [data]
this.deptName = data.name
this.listQuery.deptId = data.id
},
}
}
}
</script>