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

最新推荐文章于 2024-07-23 17:35:39 发布

避坑记录

最新推荐文章于 2024-07-23 17:35:39 发布

阅读量1.8k

点赞数

文章标签： view design javascript 前端 tree+select组件

本文链接：https://blog.csdn.net/weixin_44068262/article/details/130628274

版权

文章讲述了如何在Vue应用中创建一个Select组件，其选项呈现出树形结构。关键点包括使用hidden属性处理Option不显示，确保数据源以同级关系存储以正确显示所有层级，以及使用懒加载来处理多级数据。loadData函数用于异步获取子级数据，并动态更新option列表。

摘要由CSDN通过智能技术生成

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

要点:

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

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

option-->selectLists Tree--->selectList

<Select v-model="toolKitParams.selectionType" style="width:100%">
   <Option hidden v-for="item in selectLists" :value="item.value" :key="item.value">{{ item.label }}</Option>
   <template #default>
      <Tree ref="selectTree" :data="selectList" :load-data="loadData" @on-select-change="handlerChange"></Tree>
   </template>
</Select>

// 第一次获取数据时调用
// 选择分类的数据
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) // 这里一定要返回一个数组，否则报错
        }
      })
    },