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


Posted in Javascript onDecember 21, 2018

1.效果图

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

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

1.2 实时过滤效果

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
Vue实现跑马灯效果
May 25 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 #Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 #Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 #Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 #Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 #Javascript
angularjs http与后台交互的实现示例
Dec 21 #Javascript
JS执行控制之节流模式实例分析
Dec 21 #Javascript
You might like
解析PHP的session过期设置
2013/06/29 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
《乡下孩子》教学反思
2014/04/17 职场文书
跳蚤市场口号
2014/06/13 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
通知的写法
2015/04/23 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS