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 相关文章推荐
js Dialog 实践分享
Oct 22 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
js实现移动端轮播图
Dec 21 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 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
调频问题解答
2021/03/01 无线电
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php实现的递归提成方案实例
2015/11/14 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
python编写微信远程控制电脑的程序
2018/01/05 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python super()函数使用及多重继承
2020/05/06 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
普天C++笔试题
2016/03/20 面试题
防卫过当辩护词
2015/05/21 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Python实现照片卡通化
2021/12/06 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android
Python自动化实战之接口请求的实现
2022/05/30 Python
Python如何加载模型并查看网络
2022/07/15 Python