O estado padrão do seletor em cascata: ao selecionar todos, o valor do nó filho não será exibido.
Após o processamento dos dados: exibição completa dos dados selecionados
<a-cascader
v-model:value="modelRef.executors"
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 (!item.children) {
// value_type 就是你要级联选择器上绑定的 value 键
selectData.value.push(_parent.concat(item.value_type))
} else {
treeToArr(item.children, _parent.concat(item.value_type))
}
})
}
const changeResourceName = (
value: string[],
selectedOptions: Record<string, any>[],
) => {
selectData.value = []
selectedOptions.forEach((item: any) => {
const _parent = item.map((item: any) => item.value_type)
// 删除最后一项
_parent.pop()
// item[item.length - 1] 传入最后一项,也就是最后选择的那一项
treeToArr([item[item.length - 1]], _parent)
})
// 最终的赋值
modelRef.executors = selectData.value
}