vue-treeselect 的使用

npm install --save @riophae/vue-treeselect

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

components: { Treeselect }

<treeselect v-model="value" :multiple="true" :options="options" />

<template>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </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',
        } ],
      }
    },
  }
</script>

{
  id: '<id>',
  label: '<label>',
  children: [
    {
      id: '<child id>',
      label: '<child label>',
    },
    ...
  ],
}

    // 获取信息
    getAllDeps() {
      this.$axios.post("url").then(res => {
        if (res.data.responseCode === "200") {
         let tempArr=[]
          this.changeDepsDataName(res.data.data,tempArr)
          console.log(tempArr)
          this.options= tempArr
        }
      });
    },

    changeDepsDataName(dataArr, tepArr){
      for( let i=0;i<dataArr.length;i++){
        let obj={}
        obj.id = dataArr[i].id
        obj.label = dataArr[i].departmentName
        if(dataArr[i].childDepartment && dataArr[i].childDepartment.length){
          obj.children = this.changeDepsDataName(dataArr[i].childDepartment,[])
        }
        tepArr.push(obj)
      }
      return tepArr
    },