vue 下拉树结构多选、单选

vue-element select选择器结合ele-tree结构实现下拉树。
html代码：

 <el-select v-model="mineStatus" placeholder="请选择" 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属性控制是否多选，如实现单选将该属性去掉即可
filterable 属性控制是否搜索，在这里需要自定义搜索方法

js代码：

export default {
  name: 'unitsManagerDetail',
  data () {
    return {
      ruleForm: {
             mainFunAccCode: ''
      }，
      mainFunAccCodeList :[]                             //结构必须为[id:'',lable:'',children:[]]  树形结构
    }
  },
 methods: {
 //获取主功能科目列表
    getMainFunAccCodeList () {
      let params = {}
      this.$http.get('/base/basExpFunc/getBasExpFunc', params, r => {
        this.mainFunAccCodeList = r.data
      }, e => {
        console.log(e)
      })
    },

 //选择器选中触发
    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)//设置勾选的值
    },
    //树结构选中触发
    handleCheckChange () {
      let res = this.$refs.tree.getCheckedNodes(true, true) //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      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)
    }
}
}

以上方式优化的点比较多后来采用了一种比较简单的实现方式
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="国民经济行业分类" 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代码方法变量代码省略

  //主功能科目树点击触发
    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="国民经济行业分类" prop="indCode" slot="reference">
                  <el-input v-model="ruleForm.indCodeName"></el-input>
                </el-form-item>
              </el-popover>

 //国民经济行业分类树点击触发
    handleNodeClickIndCode (data) {
      const that = this
      if (data.value) {
        that.indTreeFlag = false
        that.ruleForm.indCode = data.value
        that.ruleForm.indCodeName = data.label
      }
    },

最后编辑于：2020.08.01 11:05:06