element级联选择只获取第三级数据只获取前三级节点+只选择前三级节点+传值为对象

项目场景：

项目场景：项目要求选择指定区域，区域数据为树形结构，但是有n级（n>3），并且只允许选择第3级，且获取的数据要求是对象以此进行其他操作

---

问题拆分

1.首先将n级树结构转为3级树结构，3级之后的丢弃

2.如果前面有只到2级的叶子节点，也不能选

3.选择后的值为对象，以此获取所需数据

---

解决思路：

1.使用递归或两次循环，将3级以内的树结构留下，3级之外丢弃或children为null（elementui不能用空数组）参考：

element ui tree 如何只获取前三级节点

2.如果所需数据不是对象类型，那可以通过级联选择v-model绑定的数组长度判断，等于3可选，小于3清空，大于3的情况序号1已经排除

3.如果所需是对象类型，可以使用element的el-cascader级联选择自带的方法getCheckedNodes()解决，这个方法element没有例子，参考：

element-ui cascader级联选择器，使用getCheckedNodes()获取选择对象参数信息，及如何使用props自定义设置value、label、children的键名

---

解决代码：

props、v-model、options我就不列了，场景不同这些都不同

<el-cascader
    ref="factoryCascader"
    v-model="business"
    :options="businessList"
    :show-all-levels="false"
    @change="cascdaerChange"
    :props="props">
</el-cascader>

/** 查询部门下拉树结构 */
    getTreeselect() {
      deptGet.then(val => {
        let arr = val.data
        this.businessList = this.handleTreeData(arr)
      });
    },
/**
     * @description
     * @param {*} data 树结构数据
     * @param {number} [limit=3] 层级限制
     * @param {number} [count=1]
     * @return {*}  
     */
    handleTreeData(data, limit = 3, count = 1) {
        return data?.map((x) => ({
            ...x,
            children: count < limit ? this.handleTreeData(x.children, limit, count + 1) : null,
        }))
    },
/**
     * 选择校验
     * @param {只选第三级} data 
     */
    cascdaerChange(data){
      let nodesInfo = this.$refs['factoryCascader'].getCheckedNodes()
      console.log(11,nodesInfo[0])
      let node = nodesInfo[0]
      // 只有三级目录允许选择，一二级禁止选择
      if(node.level == 3){}
      else {
        this.searchForm.business = []
      }
    }