使用element tree实现树形结构图同级数据前端自己分类

html代码

		<Tree
          :data="treeData"
          @on-check-change="checkValue"
          :render="renderTree"
          node-key="id"
        >Tree>

js代码

<script>
  export default {
    name: 'index',
    props: ['show'],
    data() {
      return {
        editFlag: false,
        userId: null,
        clientWid: '',
        clientHei: '',
        treeData: [],
        ruleValidate: [],
        data: {},
        submitPrivileges: [],
        treeresdata: {}
      }
    },
    watch: {
      show() {
        this.getTree()
      }
    },
    created() {
      this.clientWid = document.documentElement.clientWidth
      this.clientHei = document.documentElement.clientHeight
    },
    mounted() {
      this.getTree()
    },
    methods: {
      // 获取教室树
      getTree(data) {
        this.$axios.get('/url').then(res => {
          if (data !== undefined) {
            data.filter(item => {
              res.data.push(item)
            })
          }
          this.treeresdata = res.data
          this.treeresdata.filter(item => {
            this.$set(item, 'disabled', false)
          })
          this.handleTree(this.treeresdata)
        }).catch(res => {
          console.log(res)
        })
      },
      // 将数据转成树形结构
      handleTree(data) {
        let newTree = []
        let tree = data

        tree.map((el, index) => {
          newTree.push({
            title: el.name,
            expand: true, // 默认展开所有节点
            check: false,
            id: el['room-id'],
            roomType: el['room-type'],
            parent_id: el['parent-id'] || 0
          })
        })
        this.treeData = this.getTrees(newTree, 0)
      },
      /**
       * 树状的算法
       * @params list     代转化数组
       * @params parentId 起始节点
       */
      getTrees(list, parentId) {
        let items = {}
        // 获取每个节点的直属子节点，*记住是直属，不是所有子节点
        for (let i = 0; i < list.length; i++) {
          let key = list[i].parent_id
          if (items[key]) {
            items[key].push(list[i])
          } else {
            items[key] = []
            items[key].push(list[i])
          }
        }
        return this.formatTree(items, parentId)
      },
      formatTree(items, parentId) {
        let result = []
        if (!items[parentId]) {
          return result
        }
        for (let t of items[parentId]) {
          t.children = this.formatTree(items, t.id)
          result.push(t)
        }
        return result
      },
      // 提交教室
      handleSubmit() {
        this.$store.commit('nextPostFun', true)
        // this.cleanTree()
      },
      // 重置并关闭
      handleReset(val) {
        // this.cleanTree()
        this.$store.commit('nextBtnCancat', true)
      },
      // 获取选中值
      checkValue(data, checked, inde) {
        var arr = []
        arr.push(data.id)
        this.$axios.get(`/devices?room-id=${data.id}&type=3`).then(res => {
          for (var i = 0; i < res.data.length; i++) {
            this.$set(res.data[i], 'room-id', res.data[i]['device-id'])
            this.$set(res.data[i], 'name', res.data[i].name)
            this.$set(res.data[i], 'children', [])
            this.$set(res.data[i], 'parent-id', data.id)
            this.$set(res.data[i], 'checkFlg', false)
            this.submitPrivileges.push(res.data[i])
          }
          this.getTree(this.submitPrivileges)
        }).catch(res => {
          console.log(res)
        })
      },
      // 清空数据
      cleanTree() {
        this.treeData = []
      },

      renderTree(h, {root, node, data}) {
        return h('span', {},
          [
            data.children.length === 0 && data.roomType !== undefined ? h('span', {
              style: {
                cursor: 'pointer'
              },
              on: {
                click: () => {
                  console.log(this.$store.state.schoolIdList)
                  this.checkValue(data)
                }
              }
            }, data.title) : '',
            data.children.length === 0 && data.roomType !== undefined ? h('span', {
              style: {
                color: 'red',
                marginLeft: '8px',
                display: 'inline-block'
              }
            }, '(点击教室选择摄像头)') : '',
            h('span', {}, [
              data.children.length !== 0 && data.roomType !== undefined ? h('span', {}, data.title) : ''
            ]),
            data.roomType === undefined ? h('input', {
              style: {
                marginRight: '8px'
              },
              attrs: {
                type: 'checkbox',
                name: 'room'
              },
              on: {
                click: () => {
                  data.check = !data.check
                  var arr = []
                  this.treeresdata.filter(item => {
                    if (item['room-id'] === data.id && data.check === true) {
                      this.$set(item, 'checkFlg', true)
                    } else if (item['room-id'] === data.id && data.check === false) {
                      this.$set(item, 'checkFlg', false)
                    }
                    if (item.checkFlg === true) {
                      arr.push(item['room-id'])
                    }
                  })
                  this.$store.commit('schoolIdListGet', arr)
                }
              }
            }, data.title) : '',
            data.roomType === undefined ? h('span', {
              style: {
                marginRight: '8px'
              },
              on: {
                click: () => {
                }
              }
            }, data.title) : ''
          ])
      }
    }
  }
</script>