怎么在Element中實(shí)現(xiàn)input樹型下拉框

本篇文章為大家展示了怎么在Element中實(shí)現(xiàn)input樹型下拉框，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

1.效果圖

1.1 input聚焦時(shí)顯示下拉框，再次點(diǎn)擊下拉框或點(diǎn)擊其他處下拉框消失，主要靠z-index添加遮罩實(shí)現(xiàn)

1.2 實(shí)時(shí)過濾效果

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

2.1 html

 <el-form :model="form" size="mini" >
     <el-row>
      <el-col :span='12'>
        <el-form-item label="會(huì)計(jì)主管" >
         <el-input 
              placeholder="請(qǐng)選擇會(huì)計(jì)主管" 
              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"
          
          @click="cancelManager">
         </div>
         <el-tree v-show="isShowSelect"
             empty-text="暫無數(shù)據(jù)"
             :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,// 是否顯示會(huì)計(jì)主管的樹狀選擇器
   userlist: [],// 會(huì)計(jì)主管的選項(xiàng)數(shù)據(jù) 
   defaultProps: { // 會(huì)計(jì)主管 樹狀選擇器 的選項(xiàng)的配置參數(shù)
    children: 'children',
    label: 'code_name',
   },
  }
 },
 watch: {
  form: {//form.MANAGER_NAME變化時(shí)過濾節(jié)點(diǎn)
    handler(form){
     if(this.isShowSelect){
      this.$refs.selectTree.filter(form.MANAGER_NAME);
     }
    },
    deep: true,//深度監(jiān)聽，重要
  },
 },
 methods:{
    //下拉框的顯示與隱藏
    changeSelectTree(){
      this.isShowSelect = !this.isShowSelect;
    },
    //input獲取焦點(diǎn)事件,初始化樹
    async focus(e) {
      let vm = this;
      vm.$refs.selectTree.filter("");
      vm.$refs.selectTree.setCurrentNode([]);
     },
    // 選擇器的樹節(jié)點(diǎn)
    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;
    },
    //選擇會(huì)計(jì)主管
    selectManage(data, Node) {
     this.form.MANAGER_NAME = data.code_name;//input賦值
     this.form.MANAGER_ID = data.chr_id;
     this.isShowSelect = false;// 關(guān)閉選擇器
    }, 
    //點(diǎn)擊遮罩層，取消選擇會(huì)計(jì)主管
    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 參考數(shù)據(jù)

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

上述內(nèi)容就是怎么在Element中實(shí)現(xiàn)input樹型下拉框，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。