vue treeselect 使用

vue 中如果不想使用elementui 的级联组件， 可以使用vue treeselect，树形下拉组件，效果如图：

npm install --save @riophae/vue-treeselect

<template>
  <div id="app">
    <treeselect 
     v-model="value" 
     :multiple="true"    // 多选
     :options="options" 
     :normalizer="propTreeNormalizer"    // // 如果后台返回的数据  与vue-treeselect要求的数据结构不同, 可以使用此属性
     noOptionsText = "暂无数据"
     noResultsText = "暂无搜索结果"
     placeholder="请选择"
     :flat="true"  // 多选时如果子集全选中， 显示框中展示的是所有子集的名称， 如果值为false，子集全选中时 显示框中只展示父级的名字
     :default-expand-level="1"   // 默认展开第一级
     :disable-branch-nodes="true"  // 多选时 父级不显示多选框
   />
  </div>
</template>

<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
    methods:{
         // 如果后台返回的数据  与vue-treeselect要求的数据结构不同，例如，您的数据具有name属性，但vue-treeselect需要label，则可能需要自定义键名， 使用    :normalizer="propTreeNormalizer"
	     propTreeNormalizer(node) {
			return {
				id:node.id,
				label:node.title,
				children: node.childs
			}
		},
		//  如果后台返回的数据  与vue-treeselect要求的数据结构不同，也可以自己转化数据, 将后台的数据传进 getTreeData函数中，得到是值给options
		getTreeData(val) {
			let arr = [];
			val.forEach(element =>{
					let obj  = {
						id: element.id,
						label: element.name
					}
					if(element.childs && element.childs.length >0) {
						obj.children = this.getTreeData(element.childs);
					}
					arr.push(item)
			})		
			return arr;
		} 
	}
  }
</script>