1.效果图

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

1.2 实时过滤效果

2.代码 ( vue.js + element-ui )

2.1 html

2.2 JS

import 'babel-polyfill'//兼容语法 async focusexport default {  data(){    return {      form: {        MANAGER_NAME: '',        MANAGER_ID: '',      },      isShowSelect: false,// 是否显示会计主管的树状选择器      userlist: [],// 会计主管的选项数据       defaultProps: { // 会计主管 树状选择器 的选项的配置参数        children: 'children',        label: 'code_name',      },    }  },  watch: {    form: {//form.MANAGER_NAME变化时过滤节点        handler(form){          if(this.isShowSelect){            this.$refs.selectTree.filter(form.MANAGER_NAME);          }        },        deep: true,//深度监听，重要    },  },  methods:{        //下拉框的显示与隐藏        changeSelectTree(){            this.isShowSelect = !this.isShowSelect;        },        //input获取焦点事件,初始化树        async focus(e) {            let vm = this;            vm.$refs.selectTree.filter("");            vm.$refs.selectTree.setCurrentNode([]);         },        // 选择器的树节点        filterNode(value, data) {          if (!value) return true;            if(!data.code_name){                data.code_name = data.chr_code + " " + data.chr_name            }          return data.code_name.indexOf(value) !== -1;        },        //选择会计主管        selectManage(data, Node) {          this.form.MANAGER_NAME = data.code_name;//input赋值          this.form.MANAGER_ID = data.chr_id;          this.isShowSelect = false;// 关闭选择器        },         //点击遮罩层，取消选择会计主管        cancelManager(){          this.isShowSelect = false        },  }}

2.3 css

2.4 参考数据

//示例下拉框数据this.userList = [{  chr_code: "001001051",  chr_id: "9853",  chr_name: "张海舒",  is_leaf: "1",  user_type: "0",}]