vue-treeselect的使用

需求:

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

需求实现图

实现:

一、首先安装包"@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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 网站架构的演化 1,原始时代,一台服务器解决所有,经典的LAMP,廉价服务器+开源软件,网站就建起来了。 → 等到...
    勇敢的_心_阅读 4,690评论 0 15
  • 大家好!我是322号星宝宝营养美容培训师祁爽,正在参加第14期蜕变之旅,这是我的第68篇原创日记,我已经感觉到坚持...
    营养美容培训师祁爽阅读 1,501评论 0 0
  • 本以为这辈子最爱的人只会是我自己 而你肯定是有预谋的出现。恰巧你又拒绝了我,嗤之以鼻。我开始看不见你 ,听不到你...
    山下智久阅读 1,813评论 0 1
  • 第一、技术输出型 这个问题其实不好回答,因为说道这个问题的时候,我们很多人第一反应就是接私活,但是在哪里接私活,怎...
    你的社交帐号昵阅读 5,963评论 0 2