vue.js构造树

树形结构构造

循环方法，判断有children就调用自己

//格式化树结构
    formatTree(data, form) {
      const haveChildren = Array.isArray(data.children) && data.children.length > 0
      const obj = {}
      Object.keys(form).map(key => {
        const oldKey = form[`${key}`]
        obj[`${key}`] = data[`${oldKey}`]
      })
        //obj.shuxing = ''//可以给默认属性值
      obj['children'] = haveChildren ? data.children.map(i => this.formatTree(i, form)) : []
      return obj
    },

接口获取数据，取需要的值

    //获取树
    async getTree() {
      const result = await getTree()//获取接口，这个接口不需要传参
      if (result.code == 1) {
        const form = {//左边是需要构造的属性
          id: 'id',
          text: 'name',
          title: 'name',//右边是接口返回的数据的属性
        }
        const dataList = result.data.map(x => this.formatTree(x, form))
        this.dataList = dataList
      } else {
        this.$Message.info(result.message)
      }
    },