elementui下拉框显示树结构

 https://www.vue-treeselect.cn/

前端树，下拉框显示树结构 

:defaultExpandLevel="Infinity" 设置 Infinity 为默认使所有分支节点扩展

在package.json中加入依赖 ：

"@riophae/vue-treeselect": "^0.4.0",

前端部分代码：

          <treeselect

              :options="moduleOptions"

              style="line-height: 20px; 90%;"       

 

              :auto-select-ancestors="false"

              placeholder="请选择所属模块"

              v-model="moduleForm.module"

              v-if="projectObj && projectObj.project !== 'init'"

            />

 

import Treeselect from '@riophae/vue-treeselect'

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

  components: {

    Treeselect

  },

getAllModule() {
      let param = {}
      let self = this
      commData.getAllModule(param).then(data => {
        if (data.success && data.data) {
          let rootArr = []
          for (let i = 0; i < data.data.length; i++) {
            if (data.data[i].parentId === '0') {
              rootArr.push(data.data[i])
            }
          }
          this.getMenuChildTree(data.data, rootArr)
        }
      }).catch(e => {
        self.$message.error('服务端出错')
      })
    },
    getMenuChildTree(datas, dataArray) {
      for (let j = 0; j < dataArray.length; j++) {
        let dataArrayIndex = dataArray[j]
        let childrenArray = []
        let Id = dataArrayIndex.id
        for (let i = 0; i < datas.length; i++) {
          let data = datas[i]
          let parentId = data.parentId
          if (parentId === Id) {
            let objTemp = {
              id: data.id,
              label: data.module
            }
            childrenArray.push(objTemp)
          }
        }
        if (childrenArray.length > 0) {
          dataArrayIndex.children = childrenArray
          this.getMenuChildTree(datas, childrenArray)
        }
      }

　　　　this.moduleOptions = dataArray

    },