iview中最简单的TreeSelect组件的实现。iview中select组件和tree组件的结合

 实现一个在选择框中有树形结构的功能。

要点:

1. select中的option不能省略，要有，不然就选了值没有办法显示。使用的时候给option加 hidden 属性。这样option就不会出来了。

2. option中的数据源与Tree中的数据源不是同一个数组！！！因为如果直接使用Tree中的selectList,存在上下级关系，所以选择的时候只会显示第一级的数据。要展示option中的每一项，就要将数据存储为同级的关系。

option-->selectLists     Tree--->selectList

// 第一次获取数据时调用
// 选择分类的数据
async getToolTypeList(id, callback) {
  await getToolTypeList({ parentId: id || 0 }).then(res => {
     if (res.code === 0) {
      this.selectList = res.data.map(item => {
        return {
          value: item.id,
          label: item.name,
          children: [],
          loading: false,
          title: item.name,
        }
      })
      this.selectLists = this.selectList
    }
  })
},

    // 懒加载执行
    loadData(item, callback) {
      item.loading = true;
      getToolTypeList({ parentId: item.value }).then(res => {
        if (res.code === 0) {
          // 取消最低级别的箭头
          if (res.data.length === 0) {
            item.loading = false
            delete item.loading
            return false
          } else {
            item.children = res.data.map(m => {
              return {
                value: m.id,
                label: m.name,
                title: m.name,
                children: [],
                loading: false
              }
            })
            item.loading = false
            // option 数据源的拼接
            this.selectLists = this.selectLists.concat(item.children)
          }
          console.log("item", item);
          callback(item.children) // 这里一定要返回一个数组，否则报错
        }
      })
    },