Element input树型下拉框的实现代码

 <el-form :model=\"form\" size=\"mini\" >
     <el-row>
      <el-col :span=\'12\'>
        <el-form-item label=\"会计主管\" >
         <el-input 
              placeholder=\"请选择会计主管\" 
              class=\"width-220 selectTree-input\" 
              v-model=\"form.MANAGER_NAME\" 
              icon=\"caret-bottom\" 
              auto-complete=\"off\"
              @focus=\"focus($event)\"
              @click.native=\"changeSelectTree()\">
         </el-input>
         <div
          v-show=\"isShowSelect\"
          style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 102;\"
          @click=\"cancelManager\">
         </div>
         <el-tree v-show=\"isShowSelect\"
             empty-text=\"暂无数据\"
             :highlight-current = true
             :default-expand-all = false
             :expand-on-click-node=\"false\"
             :filter-node-method=\"filterNode\"
             :data=\"userlist\"
             node-key=\"chr_id\"
             :props=\"defaultProps\"
             @node-click=\"selectManage\"
             class=\"objectTree\"
             ref=\"selectTree\">
         </el-tree>
        </el-form-item>
      </el-col>
      <el-col :span=\'12\'>

      </el-col>
     </el-row>
    </el-form>

import \'babel-polyfill\'//兼容语法 async focus
export 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
    },
 }
}

<style lang=\"scss\">
 /*下拉框选择树*/
 .objectTree {
  position: absolute;
  overflow: auto;
  z-index: 100;
  width: 110%;
  height: 200px;
  border: 1px solid #ddd;
  line-height: normal; 
  z-index: 204;
 }
 .selectTree-input {
  input:focus {
   z-index: 204;//103
  }
 }
 .width-220{
  width: 220px
 }
</style>

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