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="Nm" :label="Nm" :value="Cd" 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中内容平铺的listcbbmOptions: [], // tree中内容 带父子级别的数据}},methods: {//tree节点点击事件handleNodeClick(node) {this.cbbmList = Nm;this.$refs.selectTree.blur();},}