这篇文章主要介绍了Element 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 
              
              
              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="暂无数据"
             :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"
            
             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",
}]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
LG已停止为iPhone生产LCD面板 iPhone SE使用JDI和夏普屏幕

LG已停止为iPhone生产

据报道,LG Display已停止为iPhone生产LCD面板,相关生产
阿里巴巴美股开盘涨超6% 马云今日通过视频连线形式“现身”

阿里巴巴美股开盘涨超

阿里巴巴美股开盘涨超6%,报267.20美元,市值达7229.46亿
货拉拉将完成F轮15亿美元融资 高瓴资本领投

货拉拉将完成F轮15亿

继12月22日完成5.15亿美元E轮融资不到一个月,货拉拉已
百度美股开盘涨近4% 消息称百度拟春节后在港提交上市申请

百度美股开盘涨近4%

百度开盘涨3.75%,报259.82美元,市值达886.18亿美元。据
长江商学院教授刘劲:新能源汽车估值泡沫何时会破?

长江商学院教授刘劲:新

竞争白热化时,更有可能大量新能源车企无法盈利,以零利润
特斯拉获得华尔街最高目标价 分析师对其“非凡”优势青睐有加

特斯拉获得华尔街最高

Oppenheimer分析师Colin Rusch将特斯拉目标股价上调至
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,