vue项目中树形结构下拉框(vue-treeselect)

1.npm 安装依赖

npm install --save @riophae/vue-treeselect

2. 在需要使用的组件中引入

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

 components: { Treeselect }

3.使用

<treeselect
    :options="optionsMechanism"
    placeholder="select...."
    v-model="value"/>

data(){
    return{
       value:null,
       optionsMechanism:[{
          id: 'fruits',
          label: 'Fruits',
          children: [ {
            id: '432673427163429080',
            label: 'Apple 🍎',
            isNew: true,
          }, {
            id: 'grapes',
            label: 'Grapes 🍇',
          }, {
            id: 'pear',
            label: 'Pear 🍐',
          }, {
            id: 'strawberry',
            label: 'Strawberry 🍓',
          }, {
            id: 'watermelon',
            label: 'Watermelon 🍉',
          } ],
        }, {
          id: 'vegetables',
          label: 'Vegetables',
          children: [ {
            id: 'corn',
            label: 'Corn 🌽',
          }, {
            id: 'carrot',
            label: 'Carrot 🥕',
          }, {
            id: 'eggplant',
            label: 'Eggplant 🍆',
          }, {
            id: 'tomato',
            label: 'Tomato 🍅',
          } ],
      }],

    }

}

 效果图

 

几个常用属性

1.禁用控件 在标签加disabled属性为true

2.多选控件 在标签加multiple属性为true

3.禁用分支，在树结构数据中与label平级的地方添加isDisabled:true

官网文档很清晰   https://www.vue-treeselect.cn/#disable-item-selection