级联选择器默认状态:当进行全选的时候,是不会展示子节点value
经过数据处理后:完整展示所选数据
<a-cascader
v-model:value=""
placeholder="请选择生效部门或执行人"
:options="departments"
dropdownClassName="permission-container"
:dropdownMatchSelectWidth="true"
:getPopupContainer="getPopupContainer"
:notFoundContent="'暂无数据'"
multiple
:field-names="{
label: 'label',
value: 'value_type',
children: 'children',
}"
:show-search="{ filter }"
expand-trigger="hover"
change-on-select
@change="changeResourceName"
allow-clear
:open="true"
></a-cascader>
const selectData = ref<any>([])
// (注意)树形结构平铺,且仅获取有完整上下级节点的,没有下级的需要提前disabled 掉,否则会出现意想不到的bug
// 利用递归循环,组合数据结构,最终是一个二维数组
const treeToArr = (_tree: any[], _parent: any['options'] = []) => {
_tree.forEach((item) => {
if (!) {
// value_type 就是你要级联选择器上绑定的 value 键
(_parent.concat(item.value_type))
} else {
treeToArr(, _parent.concat(item.value_type))
}
})
}
const changeResourceName = (
value: string[],
selectedOptions: Record<string, any>[],
) => {
= []
((item: any) => {
const _parent = ((item: any) => item.value_type)
// 删除最后一项
_parent.pop()
// item[ - 1] 传入最后一项,也就是最后选择的那一项
treeToArr([item[ - 1]], _parent)
})
// 最终的赋值
=
}