vue element Cascader 级联选择器 选择任意一级选项 点击收起，点击label选中等问题详解

1. 温馨提示：Cascader 级联选择器 选择任意一级 请切换到 2.12.0 最新版

2. 直接步入主题，先看下需求要实现的功能

就是一个级联联动效果，但是他是每一级都能够选择，可以看到既可以选商品组，还能选择商品组下面的团队长，也就是他的子级。

找到饿了吗的级联选择器，快捷访问地址：然后找到选择任意一级选项

点击跳转：Cascader 级联选择器

3. Cascader 级联选择器 数据渲染

其实这个很简单，就是通过 :options="options" 映射就OK啦。让每一级都可以选择设置属性 :props="{ checkStrictly: true }"

上面的就是很简单的渲染，这里就不给大家看具体实现代码了，坑还在后面，这是我渲染的结果

4. 本文重点来了。。。

当我们都写完了的时候，but，特么这官网这个有两个问题：

1. 点击圆圈后理想是自动收起下拉，但是他这个也没有
2. 而且只能点击圆圈才能选中，点击文字 label 没有效果

于是，开始了艰辛的百度历程: 最后依然没有找到答案，好像很少人用这种，级联每一级都可以选择的。。。用得多的就是选中最后一级，像省级联动之内的

打铁还需自身硬，只有自己去慢慢看了。后面终于解决了这两个问题：
先看第一个问题，让他收起来，这个好像不难，确实不难：
设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。（虽说简单，但是这个属性我找了半天，官网根本没有说~~~~(>_<)~~~~ ）

  watch: {
    handlerValue() {
      if (this.$refs.refHandle) {
        this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
      }
    }
  },

在看看第二个问题，点击label 也每次让他选中，卧槽，无从下手，后面怎么解决的说来话长，看实现代码吧。

mounted() {
	//点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡，暂时想不到好方法来触发。
	//这种比较耗性能，暂时想不到其他的，能实现效果了。
    setInterval(function() {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  },

5. 补充其它问题

后端返回的字段和前端的不一致，请使用 props 把 value,label,children 做映射

vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题