vue-element select選擇器結(jié)合ele-tree結(jié)構(gòu)實(shí)現(xiàn)下拉樹。
html代碼：

 <el-select v-model="mineStatus" placeholder="請(qǐng)選擇" multiple  filterable @change="selectChange">
                <el-option  :value="mineStatusValue" style="height: auto">
                  <el-tree :data="mainFunAccCodeList" show-checkbox node-key="id" ref="tree"
                   highlight-current
                  :props="ruleForm.mainFunAccCode"
                   @check-change="handleCheckChange">
                  </el-tree>
                </el-option>
              </el-select>

multiple屬性控制是否多選，如實(shí)現(xiàn)單選將該屬性去掉即可
filterable 屬性控制是否搜索，在這里需要自定義搜索方法

js代碼：

export default {
  name: 'unitsManagerDetail',
  data () {
    return {
      ruleForm: {
             mainFunAccCode: ''
      }，
      mainFunAccCodeList :[]                             //結(jié)構(gòu)必須為[id:'',lable:'',children:[]]  樹形結(jié)構(gòu)
    }
  },
 methods: {
 //獲取主功能科目列表
    getMainFunAccCodeList () {
      let params = {}
      this.$http.get('/base/basExpFunc/getBasExpFunc', params, r => {
        this.mainFunAccCodeList = r.data
      }, e => {
        console.log(e)
      })
    },

 //選擇器選中觸發(fā)
    selectChange (e) {
      var arrNew = []
      var dataLength = this.mineStatusValue.length
      var eleng = e.length
      for (let i = 0; i < dataLength; i++) {
        for (let j = 0; j < eleng; j++) {
          if (e[j] === this.mineStatusValue[i].label) {
            arrNew.push(this.mineStatusValue[i])
          }
        }
      }
      this.$refs.tree.setCheckedNodes(arrNew)//設(shè)置勾選的值
    },
    //樹結(jié)構(gòu)選中觸發(fā)
    handleCheckChange () {
      let res = this.$refs.tree.getCheckedNodes(true, true) //這里兩個(gè)true，1. 是否只是葉子節(jié)點(diǎn) 2. 是否包含半選節(jié)點(diǎn)（就是使得選擇的時(shí)候不包含父節(jié)點(diǎn)）
      let arrLabel = []
      let arr = []
      res.forEach(item => {
        arrLabel.push(item.label)
        arr.push(item)
      })
      this.mineStatusValue = arr
      this.mineStatus = arrLabel
      console.log('arr:' + JSON.stringify(arr))
      console.log('arrLabel:' + arrLabel)
    }
}
}

以上方式優(yōu)化的點(diǎn)比較多 后來采用了一種比較簡(jiǎn)單的實(shí)現(xiàn)方式
1、多選
html代碼

 <el-popover placement="bottom" style="width: 33.33%" width="300px" v-model="indTreeFlag">
                <div class="treeBox">
                  <el-tree :data="eleIndList" accordion @node-click="handleNodeClickIndCode"></el-tree>
                </div>
                <el-form-item label="國(guó)民經(jīng)濟(jì)行業(yè)分類" prop="indCode" slot="reference">
                  <el-input v-model="ruleForm.indCodeName"></el-input>
                </el-form-item>
              </el-popover>
              <el-popover placement="bottom" style="width: 33.33%" width="300px" v-model="mainTreeFlag">

js代碼方法 變量代碼省略

  //主功能科目樹點(diǎn)擊觸發(fā)
    handleNodeClickMain () {
      const that = this
      var dataList = this.$refs.tree.getCheckedNodes()
      var labelList = []
      var idList = []
      console.log(this.$refs.tree.getCheckedNodes())
      for (let i = 0; i < dataList.length; i++) {
        labelList.push(dataList[i].label)
        idList.push(dataList[i].id)
      }
      that.mainTreeFlag = false
      that.ruleForm.mainFunctionalSubjects = idList.join(',')
      that.ruleForm.mainFunctionalSubjectsName = labelList.join(',')
      console.log(that.ruleForm.mainFunctionalSubjects)
      console.log(that.ruleForm.mainFunctionalSubjectsName)
    },

2、單選
html代碼

  <el-popover placement="bottom" style="width: 33.33%" width="300px" v-model="indTreeFlag">
                <div class="treeBox">
                  <el-tree :data="eleIndList" accordion @node-click="handleNodeClickIndCode"></el-tree>
                </div>
                <el-form-item label="國(guó)民經(jīng)濟(jì)行業(yè)分類" prop="indCode" slot="reference">
                  <el-input v-model="ruleForm.indCodeName"></el-input>
                </el-form-item>
              </el-popover>

js

 //國(guó)民經(jīng)濟(jì)行業(yè)分類樹點(diǎn)擊觸發(fā)
    handleNodeClickIndCode (data) {
      const that = this
      if (data.value) {
        that.indTreeFlag = false
        that.ruleForm.indCode = data.value
        that.ruleForm.indCodeName = data.label
      }
    },