element Tree树形控件的使用

<!--
 * @Description: 
 * @Author: Ran junlin
 * @Date: 2021-07-01 12:58:01
 * @LastEditTime: 2021-07-14 15:38:46
 * @LastEditors: Ran junlin
-->
<template>
  <div class="table-wrapper">
     <button @click="handleCancelSelect">取消所有</button>
    <el-tree
      ref="tree"
      :data="treeCats"
      :props="defaultProps"
      @check-change="handleCheckChange"
      accordion
      node-key="value"
      show-checkbox
    ></el-tree>
   
    <!-- <div class="block">
      <span class="demonstration">折叠展示Tag</span>
      <el-cascader
        @change="changeOrg"
        :options="treeCats"
        :props="props"
        collapse-tags
        v-model="org2"
        clearable
      ></el-cascader>
    </div> -->
  </div>
</template>
    



<script>
import unit from '@/utils/unit'
import { makeElementTree } from '@/utils/createTree'
export default {
  name: 'warehouse-manage',
  data () {
    return {
      props: { multiple: true },
      treeCats: [],
      permissionIds: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  mounted () {
    console.log(unit);
    const unitList = unit.unit
    this.treeCats = makeElementTree({
      pid: '910101',               // 顶级分类的 pid 为 0
      list: unitList,           // 将原始数组参数穿进去
      pidFiled: 'pId', // 在数组对象中，pid 字段名为 parentId
      labelFiled: 'name',// 我们想要的 label 字段名为 catname
      valueFiled: 'id'   // 我们想要的 value 字段名为 catid
    })
    console.log(this.treeCats)

  },
  methods: {
    changeOrg (e) {
      //截取机构最后一层的unitCode
      console.log(e);
      if (e.length != 0) {
        this.ogr = e[e.length - 1][e.length - 1]
        console.log(this.ogr)
      }
    },
    handleCheckChange (data) {
      // console.log(data);
      let res = this.$refs.tree.getCheckedNodes()
      let arr = []
      res.forEach((item) => {
        arr.push(item.value)
      })
      let menuArr = this.unique(arr); // 去除重复的节点
      this.permissionIds = menuArr.join(',')
      console.log(this.permissionIds);
    },

    // 数组去重
    unique (arr) {
      let newArr = []
      let len = arr.length
      for (let i = 0; i < len; i++) {
        if (newArr.indexOf(arr[i]) == -1) {
          newArr.push(arr[i])
        }
      }
      return newArr
    },
    //取消所有节点选中
    handleCancelSelect () {
      this.$refs.tree.setCheckedKeys([]);
    },
    handleNodeClick (data) {
      console.log(data);
    }
  }
}
</script>
<style lang="scss" scoped>
.table-wrapper {
  // display: flex;
  width: 200px;
  border: 1px solid red;
}
</style>

export const makeElementTree = (params) => {
  // console.log(params);
  // 解构取出参数
  const {
    pid,
    list,
    pidFiled,
    labelFiled,
    valueFiled
  } = params
  // 构建一个内部函数，用于实现递归
  const makeTree = (pid, arr) => {
    const res = []
    arr.forEach(i => {
      if (i[pidFiled] == pid) {
        // 自己调用自己，递归查归属于自己的 children
        const children = makeTree(i[valueFiled], list)
        // 将原有的数据按照 element 的格式进行重构
        const child = true
        const obj = {
          label: i[labelFiled],
          value: i[valueFiled],
        }
        // 如果有 children 则插入 obj 中
        if (children.length) {
          obj.children = children

        }
        res.push(obj)
      }
    })
    return res
  }
  return makeTree(pid, list)
}