elementui下拉框顯示樹結構

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

前端樹，下拉框顯示樹結構 

:defaultExpandLevel="Infinity" 設置  Infinity 為默認使所有分支節點擴展

在package.json中加入依賴 ：

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

前端部分代碼：

          <treeselect

              :options="moduleOptions"

              style="line-height: 20px; width: 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

    },