ant-design-vue 配置每个层

需求是有三级联动，任意点击哪个层级的选项都可以选择，而不是必须选择三级的某一项才行，一级二级只做联动。
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没变也要把三项都写上去才能显示出来哦