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

官网文档很清晰