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圆形浮动菜单特效代码
Mar 03 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
JS的get和set使用示例
Feb 20 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
vue动态配置模板 'component is'代码
Jul 04 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
傻瓜式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导出oracle库的php代码
2009/04/20 PHP
php实现网站插件机制的方法
2009/11/10 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Python多继承顺序实例分析
2018/05/26 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python实现AES加密和解密
2019/03/27 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
给同学的道歉信
2014/01/16 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
酒店辞职书范文
2015/02/26 职场文书
安全生产奖惩制度
2015/08/06 职场文书
python如何为list实现find方法
2022/05/30 Python