vue-treeselect的使用

Posted 2023-03-23

参考技术A 需求：

选择地点，一次呈树形状铺开，可以多选，可以删除，支持搜索

实现：

一、首先安装包"@riophae/vue-treeselect":"^0.0.37",

二、在要用的vue页面上

import Treeselectfrom '@riophae/vue-treeselect'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'

三、挂组件

components: Treeselect,

四、在需要写的地方引

<treeselect

  :multiple="true"

  :options="selectPlace"

  :flat="true"

  :sort-value-by="sortValueBy"

  :default-expand-level="1"

  placeholder="请输入城市名，如杭州市，厦门市"

  v-model="value"

/>

  :multiple="true"

是否可以多选

  :options="selectPlace"

提供给用户选择的数据，，我这儿因为是地点选择，所以这里面的值 是调用了一个接口

this.selectPlace =JSON.parse(cityData.replace(/orgId/g,"id").replace(/orgName/g,"label").replace(/childrenDataList/g,'children'));

这种地点城市的一般后台需要 的是code，所以我上面的操作是为了实现这个

this.selectPlace.map(function (provinceValue, index, arr)

if(provinceValue.children !=null)

provinceValue.children.map(function (cityValue, index, arr)

if (cityValue.children !=null)

cityValue.children =''

     

);



);

我这儿是控制只显示到市，，，，如果要到区，那么这个map不需要写

  :flat="true"

A下面有——a1,a2,a3,a4,a5

如果你设为true ,那么你全部选中，A前面也不会选中，而且 在输入框里显示的还是a1,a2,a3,a4,a5

如果你这个不写，那么你选中全部，A前面也会选中，那么输入框里面显示的是A

这要结合自己的需求

  :sort-value-by="sortValueBy"

这个是排序的作用

最后value里面存的就是你选中的值 

官方提供了不同情况下的使用，可以按照需要设置

https://www.vue-treeselect.cn/