需求是有三级联动，任意点击哪个层级的选项都可以选择，而不是必须选择三级的某一项才行，一级二级只做联动。
ant官网上没有摆出这个案例，都是点击三级关闭，或者hover方式打开，也是选择三级的才能关闭。
自己做了一个自定义的选择器，效果不如官方用起来顺滑，于是又研究了一遍，发现官方也是可以通过配置参数实现出这种效果的。
<a-cascader :show-search="{ filter }" :options="options" :display-render="displayRender" expand-trigger="hover" placeholder="选择所属机构/团队" changeOnSelect @change="onChange" />
<script>
export default {
data() {
return {
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
],
};
},
methods: {
onChange(value) {
console.log(value);
},
filter(inputValue, path) {
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
},
displayRender({ labels, selectedOptions }) {
// 初始化时selectedOptions为空数组，当选择某一项关闭弹窗的时候会触发这个方法，lables，selectedOptions返回为多级数组，如果是想要数据里面的id或者其他参数，可以使用selectedOptions
if (selectedOptions.length === 0) {
// 初始化和点击清除按钮触发
this.queryParam.orgId = '';
this.queryParam.teamId = '';
} else {
let item = selectedOptions[selectedOptions.length - 1];
if (item.organizationType === 1) { // 机构
this.queryParam.orgId = item.value;
this.queryParam.teamId = '';
} else { // 团队
this.queryParam.teamId = item.value;
this.queryParam.orgId = '';
}
}
return labels[labels.length - 1];
},
},
};
</script>
image.png
image.png
changeOnSelect 和 displayRender就是关键
这种方式通过hover打开其他层级，不要忘了expand-trigger="hover"，:show-search="{ filter }" 是添加搜索关键字的功能，displayRender为点击以后触发的方法，里面的逻辑可以换成自己的。
顺带一提，倘若后台返回的参数名和ant要求的不同，可以使用:field-names="{ label: 'title', value: 'value', children: 'children' }"重命名，即使value还是children没变也要把三项都写上去才能显示出来哦
