![](https://i-blog.csdnimg.cn/blog_migrate/e17bfe7ef6b8f307821284324afdc81f.png)
单选可以查找
<el-form-item label="发起部门">
<!-- <el-select filterable clearable v-model="queryForm.managementDepId" placeholder="请选择" clearable @keyup.enter.native="queryData">
<el-option v-for="item in managementDepList" :key="item.managementDepId" :value="item.managementDepId" :label="item.depName"></el-option>
</el-select> -->
<el-cascader
:show-all-levels="false" //后端只返最后一级id加这个和emitPath: false回显
v-model="queryForm.managementDepId"
placeholder="请输入"
style="width: 100%"
:props="{ value: 'managementDepId', label: 'depName', children: 'children', emitPath: false }"
:options="managementDepList"
clearable
filterable
></el-cascader>
</el-form-item>
queryForm: {
currentPage: 1,
pageSize: 20,
collectionEndDate: '', //征集结束时间
itemTitle: '', //事项名称
managementDepId: '', //发起部门
},
// 获取部门树数据
async selectAllManagementDep() {
this.tabsLoading = true
const res = await sysDepServer.get()
if (res.success) {
this.managementDepList = res.obj
this.recursionData(this.managementDepList)
} else {
this.$message.error(res.msg)
}
setTimeout(() => {
this.tabsLoading = false
}, 400)
},
// 递归处理 子级为空,删除子级childList
recursionData(list) {
list.forEach((item) => {
if (item.children?.length > 0) {
this.recursionData(item.children) // 递归调用 传入子数组
} else {
delete item.children
return
}
})
},
多选可以查找
<el-form-item label="可查看部门" prop="permissionDepIds">
<el-cascader
:show-all-levels="false"//返最后一级id回显
v-model="ruleForm.permissionDepIds"
placeholder="请输入"
style="width: 100%"
:props="{ value: 'managementDepId',
label: 'depName',
children: 'children',
multiple: true, //设置多选
emitPath: false }"//返最后一级id回显
:options="departmentList"
clearable
filterable
></el-cascader>
</el-form-item>
ruleForm: {
managementDepId: '', // 部门名称
permissionDepIds: [], //可查看部门id集合
permissionType: 2, //权限类型:1.全部权限2.自定义权限
},
------------------------数据获取---------------------------------
// 获取部门树数据
async selectAllManagementDep() {
this.tabsLoading = true
const res = await sysDepServer.get()
if (res.success) {
this.departmentList = res.obj
this.recursionData(this.departmentList)
} else {
this.$message.error(res.msg)
}
setTimeout(() => {
this.tabsLoading = false
}, 400)
},
// 递归处理 子级为空,删除子级childList
recursionData(list) {
list.forEach((item) => {
if (item.children?.length > 0) {
this.recursionData(item.children) // 递归调用 传入子数组
} else {
delete item.children
return
}
})
},
-------------------编辑-------直接回显不用做多余的处理--------------
if (this.dialogType === 'edit') {
this.$nextTick((item) => {
//可查看部门id集合
this.ruleForm.permissionDepIds = this.dateildata.permissionDeps.map((item) => item.managementDepId)
})
}