element tree中全选功能以及树形结构与一维数组的相互转换

具体实现代码如下：

包含全选以及树状图一维数组以及树形结构之前相互转换；

<!-- dom结构如下 -->
<el-checkbox 
  :indeterminate="isIndeterminate"
  v-model="checkAll" 
  @change="handleCheckAllChange"
>全选</el-checkbox>
<el-tree
  @check-change="handleCheckedChange"
  :data="areaOptions"
  show-checkbox
  default-expand-all
  ref="area"
  node-key="id"
  empty-text="加载中，请稍后"
  :props="defaultProps"
></el-tree>

export default {
  data() {
    return {
        /**定义变量**/
         //半选
        isIndeterminate: false,
        //全选
        checkAll: false,
        //多维转一维数组
        allAreaArr: [],
        //模拟树状数据结构
        areaOptions: [
          {
            id: 1,
            label: '一级 1',
            children: [
              {
                id: 4,
                label: '二级 1-1',
                children: [
                  {
                    id: 9,
                    label: '三级 1-1-1'
                  }, {
                    id: 10,
                    label: '三级 1-1-2'
                  }
                ]
              }
            ]
          },
        ],
      //模拟一维数组
      treeData: [
         {"id":2,"name":"第一级1","pid":0},
        {"id":3,"name":"第二级1","pid":2},
        {"id":5,"name":"第三级1","pid":4},
        {"id":100,"name":"第三级2","pid":3},
        {"id":6,"name":"第三级2","pid":3},
        {"id":601,"name":"第三级2","pid":6},
        {"id":602,"name":"第三级2","pid":6},
        {"id":603,"name":"第三级2","pid":6}
      ]
    },
    methods: {
        /** 树形结构数据转单层数组形式*/
        jsonToArray(nodes) {
          let r = [];
          if (Array.isArray(nodes)) {
            for (let i = 0, l = nodes.length; i < l; i++) {
              r.push(nodes[i]); // 取每项数据放入一个新数组
              if (Array.isArray(nodes[i]["children"]) && nodes[i]["children"].length > 0)
                // 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
                r = r.concat(this.jsonToArray(nodes[i]["children"]));
              // delete nodes[i]["children"] //此项会更改原数组
            }
          } 
          return r;
        },
          /** 监听树状图change事件 判断全选或半选 */
        handleCheckedChange($val,$checked,$node) {
            let a = this.$refs.area.getCheckedKeys().length,
                b = this.allAreaArr.length;
            this.checkAll = a == b ? true : false;
            this.isIndeterminate = a > 0 && a < b;
        },
      /** 全选 */
      handleCheckAllChange($val) {
            if (this.checkAll) {
                this.$refs.area.setCheckedNodes(this.areaOptions);
            } else {
                this.$refs.area.setCheckedKeys([]);
            }
      },
      /** 单层数组转化为树状结构，原理即为通过设置id为key值，再通过pid去找这个key是否一样，一样则为这数据的子级数据）目前无调用，写出来记录下 */
       arrayToJson(treeArray){
          let r = [],
              tmpMap ={};
          for (let i = 0, l = treeArray.length; i < l; i++) {
           // 以每条数据的id作为obj的key值，数据作为value值存入到一个临时对象里面
            tmpMap[treeArray[i]["id"]] = treeArray[i]; 
          } 
          console.log('tmpMap',tmpMap)
          for (let i=0, l = treeArray.length; i < l; i++) {
            let key = tmpMap[treeArray[i]["pid"]];
            console.log('key',key)
            //循环每一条数据的pid，假如这个临时对象有这个key值，就代表这个key对应的数据有children，需要Push进去
            //如果这一项数据属于哪个数据的子级
            if (key) {
              // 如果这个数据没有children
              if (!key["children"]){
                  key["children"] = [];
                  key["children"].push(treeArray[i]);
              // 如果这个数据有children
              }else{
                key["children"].push(treeArray[i]);
              }       
            } else {
              //如果没有这个Key值，就代表找不到属于哪个数据，那就代表没有父级,直接放在最外层
              r.push(treeArray[i]);
            }
          }
          return r
         }
    }