ElementUI 单选树形下拉框的实现

目录

一、前台Vue 页面下拉框部分代码

二、相关变量以及方法代码

---

一、前台Vue 页面下拉框部分代码

<el-select 
    class="main-select-tree" 
    ref="selectTree" 
    v-model="cbbmList" 
    style="width: 100%;">
    <el-option 
        v-for="item in bmOptions" 
        :key="item.orgNm" 
        :label="item.orgNm" 
        :value="item.orgCd" 
        style="display: none;" 
    />
     <el-tree 
        class="main-select-el-tree" 
        ref="selecteltree" 
        :data="cbbmOptions" 
        node-key="id"
        highlight-current 
        :props="{label: 'orgNm',children: 'children'}" 
        @node-click="handleNodeClick"
        :current-node-key="cbbmList" 
        :expand-on-click-node="true" 
        default-expand-all
    />
</el-select>

二、相关变量以及方法代码

变量与上图相对应，可以直接粘贴使用，其中上图的orgNm以及orgCd为自定义后台返回结果的属性，相当于label和value

export default {
    data() {
        cbbmList: "",// 下拉框双向绑定的选中变量
        bmOptions: [],//下拉框中option的基础信息，是将tree中内容平铺的list
        cbbmOptions: [],    // tree中内容 带父子级别的数据

    }
},
methods: {
  //tree节点点击事件
  handleNodeClick(node) {
        this.cbbmList = node.orgNm;
        this.$refs.selectTree.blur();
      },
}