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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
JS实现拖动示例代码
Nov 01 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 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新手上路(四)
2006/10/09 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
JS正则表达式常见用法实例详解
2018/06/19 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python导入oracle数据的方法
2015/07/10 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python实现扫雷游戏的示例
2020/10/20 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
个人求职信范文
2014/05/24 职场文书
2014个人年度工作总结
2014/12/15 职场文书
档案管理员岗位职责
2015/02/12 职场文书
春节慰问信范文
2015/02/15 职场文书
工作简历自我评价
2015/03/11 职场文书