元素输入树型下拉框的实现代码

1.效果图

1.1输入聚焦时显示下拉框，再次点击下拉框或点击其他处下拉框消失，主要靠z指数添加遮罩实现

1.2 实时过滤效果

2.代码(vue.js元素-ui)

2.1 html

El-form :型号=' form '尺寸=' mini ' El-row El-col : span=' 12 ' El-form-项目标签='会计主管埃尔-输入占位符='请选择会计主管class=' width-220 SelectTree-input ' v-model='形式. MANAGER _ NAME '图标='插入符号-底部'自动完成=' off ' @ focus=' focus($ event)' @ click。native=' changeselectree()'/El-input div v-show='是show select ' style='位置3360固定；top : 0；左： 0；宽度： 100%;高度： 100%;z-index: 102 ;'@ click=' cancelManager '/div El-tree v-show=' is show select ' empty-text='暂无数据：高亮-当前=true :默认-展开-全部=false :展开-点击-节点=' false ' :筛选-节点-方法='筛选节点' :数据='用户列表'节点-键=' chr _ id ' :道具=' defaultProps ' @节点-点击=' selectManage '类=' objectTree ' ref=' selectTree '/El-tree/El-form-item/El-col-col-col-3

导入babel-polyfill'//兼容语法async focusexport default { data(){ return { form : { MANAGER _ NAME : ' '，MANAGER_ID: ' '，}，isShowSelect: false，//是否显示会计主管的树状选择器userlist: []，//会计主管的选项数据defaultprop 3360 {//会计主管树状选择器的选项的配置参数children: 'children '，label: 'code_name '，}，} }，watch: { form: {//form .经理_姓名变化时过滤节点处理程序（表单){ if(this.isShowSelect){ this .$refs.selectTree.filter(表单. MANAGER _ NAME)；} }，deep: true，//深度监听，重要}，}，methods:{ //下拉框的显示与隐藏changeSelectTree(){ this。IsShowSelect=！this.isShowSelect}，//输入获取焦点事件，初始化树异步焦点(e) {让vm=这个虚拟机参考文献。选择树。筛选器(')；虚拟机参考文献。选择树。setcurrentnode([])；}, //选择器的树节点filterNode(值，数据){ if(！值)返回trueif(！数据。code _ name){ data。code _ name=数据。chr _ code ' '数据。chr _ name }返回data.code_name.indexOf(值)!==-1;}, //选择会计主管选择管理（数据，节点){这个。形式。MANAGER _ NAME=数据。代码_ NAME//输入赋值这个。形式。MANAGER _ ID=数据。chr _ IDthis.isShowSelect=false//关闭选择器}, //点击遮罩层，取消选择会计主管cancelManager(){ this。isshowsselect=false }，}}2.3 css

style lang=' SCS '/*下拉框选择树*/.对象树{位置：绝对值；飞越：汽车；z指数： 100；宽度： 110%;高度： 200像素；border: 1px固体# ddd线高：正常；z指数： 204；} .selectTree-input { input : focus { z-index : } 204；//103 } } .width-220 { width : 220 px }/style 2.4参考数据

//示例下拉框数据这个。user list=[{ chr _ code : ' 001001051 '，chr_id: '9853 '，chr_name: '张海舒，is_leaf: '1 '，user_type: '0 '，}]以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。