el-input 樹型下拉框

1.效果圖

1.1 input聚焦時顯示下拉框，再次點擊下拉框或點擊其餘處下拉框消失，主要靠z-index添加遮罩實現

1.2 實時過濾效果

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

2.1 html

<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>

2.2 JS

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
        },
  }
}

2.3 css

<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>

2.4 參考數據

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