美文网首页
vue-treeselect的使用

vue-treeselect的使用

作者: Light_shallow | 来源:发表于2018-11-23 11:04 被阅读0次

    需求:

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

    需求实现图

    实现:

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

    相关文章

      网友评论

          本文标题:vue-treeselect的使用

          本文链接:https://www.haomeiwen.com/subject/aovdqqtx.html