el-tree 从叶子节点入手解决选中问题

0. 缘起

第一次用el-tree，是一个很阴间的任务，不过可以抄小伙伴的，快乐抄了过来结果发现我这边出了个BUG，省市区，市级选中其下所有的区也被选中。但我一看请求返回值，它的是否选中状态是正确的。所以我需要抓抓代码BUG。

1. 封装el-tree

整体封装组件代码见附录

props传进去一些当前的value名

      defaultProps: {
        children: "list",
        label: "name",
        isLeaf: "leaf",
      },

这一步非常关键，要记住el-tree判断是否选中要从叶子结点看！如果单纯以是否选中(tick为true)，就会出现非叶节点选中，其下级全部选中的BUG。

resolveData(data, newArr, level, regionStr)这个递归函数深度搜索，如果到达该分支叶节点，就进行下一分支的查找。

data ：递归数组 ---newArr： 记 id ---level：深度 --- regionStr：

    // 数据处理
    resolveData(data, newArr, level, regionStr) {
      level++;
      data.forEach((item) => {
        if (level <= 3) {
          if (level === 1) {
            regionStr = "";
            item.region = item.id + "";
          } else {
            item.region = regionStr + "," + item.id;
          }
          item.type = "region";
        }
          
// important step
        if (item.tick && level === 3) {
          newArr.push("" + item.id);
          this.checkedIdList.push(item.region);
        }
        if (item.list) {
          this.resolveData(item.list, newArr, level, item.region);
        }
      });
    },

获取生成树的数据，同时也是递归开始

    async getAreaConnectList() {
      let res = await getAreaConnectList(this.chosen);
      if (res.code === 200) {
        this.treeDataAll = res.data || [];
      } else {
        this.$message.error("获取区域关联数据失败", res.code);
      }
      let arr = [];
      let level = 0;
      let regionStr = "";
      this.resolveData(this.treeDataAll, arr, level, regionStr);
      this.defaultCheckedKeys = arr || [];
    },

        

    handleNodeCheck(val) {
      this.checkedIdList = val.checkedNodes.map((item) => {
        return item.region;
      });
    },

2. 心得

这几天搞什么级联选择器 树结构，和数组打交道很多。要注意数据格式和回显方式，想清楚怎么来 怎么发送。

el-tree判断是否选中要从叶子结点看！如果单纯以是否选中(tick为true)，就会出现非叶节点选中，其下级全部选中的BUG

附录