Vue2+element-ui 实现select选择器结合Tree树形控件实现下拉树效果

本文主要是介绍Vue2+element-ui 实现select选择器结合Tree树形控件实现下拉树效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 效果：

DOM部分 ： // 设置el-option隐藏的下拉选项，选项显示的是汉字label，值是value // 如果不设置一个下拉选项，下面的树形组件将无法正常使用

<el-form-item label="报警区域" prop="monitorId"><el-select ref="selectUpResId" v-model="queryParams.labelName" placeholder="请选择报警区域" class="treeselect-main">// 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value// 如果不设置一个下拉选项，下面的树形组件将无法正常使用<el-option hidden :key="queryParams.monitorId" :value="queryParams.monitorId":label="queryParams.labelName"></el-option><el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true"@node-click="handleNodeClick"  :highlight-current="true" :current-node-key="currentKey"></el-tree></el-select></el-form-item>

 js部分：

:highlight-current="true" :current-node-key="currentKey"开启高亮当前节点的功能

this.deptOptions格式为数组嵌套数组：例如

 data: [{id: 1,name: '一级 1',children: [{id: 11,name: '二级 1-1',children: [{id: 111,name: '三级 1-1-1'}]}]}],

data({// 查询参数queryParams: {pageNum: 1,pageSize: 10,pushType: null,pushTime: null,level: null,status: null,monitorId: null, //绑定的idlabelName: '' //用于回显的label文字},
//下拉款结构defaultProps: {children: 'children',label: 'label'}}
)created() {this.getMonitorTree() //初始化获取tree下拉框},methods: {/** 获取监控区域下拉树结构 */getMonitorTree() {monitorTreeSelect().then((response) => {response.data.forEach(item => {this.deptOptions.push({id: item.id,label: item.label,children: item.children,})});})},
//选中需要绑定的id，赋值给 this.queryParams.monitorIdhandleNodeClick(data) {this.queryParams.labelName = data.labelthis.queryParams.monitorId = data.idthis.$refs.selectUpResId.blur()  //选中后隐藏下拉框}
}

这篇关于Vue2+element-ui 实现select选择器结合Tree树形控件实现下拉树效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---