地区级联菜单，选择任意一项可关闭，在子菜单上具有全选功能（全省，全市）

主要使用的是elementUi中的级联菜单，任意选择一项。
`

                             expand-trigger="hover"
                             size="small"
                             :options="allregion"
                             :props="propstype"
                             v-model="formInline.region"
                             @change="handleChange"
                             placeholder="请选择">
                  `
                  

由于我的绑定的值是对象里的值，因此使用了计算属性来监听绑定值得变化，实现选择任意一项关闭级联选择器。

computed: {
    newRegion: function () {
      return this.formInline.region
    }
  },
  watch: {
    newRegion: {
      handler (val, oldVal) {
        console.log(oldVal);
        this.$refs.cascader.toggleDropDownVisible()
      },
      deep: true
    }
  },

若是直接绑定得无需计算属性。这样基本就实现了点击后关闭得功能。

 mounted () {
    setInterval(function () {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function () {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  },

点击文本就让它自动点击前面的input就可以触发选择。
全省，全市主要是通过数据的处理：

 // 处理空的地区数据
    getTreeData (data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
          if (data[i].depth == 2) {
            data[i].children.unshift({
              keyword: "",
              name: "全市",
              id: data[i].parentid
            });
          }
          if (data[i].depth == 1) {
            data[i].children.unshift({
              keyword: "",
              name: "全省",
              id: data[i].parentid
            });
          }
        }
      }
      return data;
    },

这是在处理后端返回空数组的基础上，添加需要的信息，主要依靠返回数据中的级别来确定，和其携带的父级ID。
由于第一级中的全部也是由前端添加，所以必须仿照数据结构添加一个类似的数据：

 this.allregion.unshift({
          keyword: "全部",
          name: "全部",
          city: "全部",
          district: "全部",
          depth:1,
          id:'',
        });

这样在点击全部的时候也可以使用了。
获取的选择参数是一个数组结构，因此要做出一些判断，直接在级联菜单的change事件里获取到选择的值判断需要的值返回给后端。