element-ui 远程搜索组件el-select在项目中组件化的实现代码


Posted in Javascript onDecember 04, 2019

在项目中发现使用el-select时写的比较多重复代码,还有就是同一个页面使用el-select会出现label值会显示value值,
el-select组件化:

<template>
 <el-select
  :class="obj&&keyword[keywordAttr.label]? 'selected': ''"
  :value="keyword"
  :placeholder="obj && keyword[keywordAttr.label]? keyword[keywordAttr.label]: placeholder"
  filterable
  :clearable="clear"
  remote
  :multiple="multiple"
  :loading="selectLoading"
  :reserve-keyword="reserve"
  :remote-method="remoteMethod"
  :style="{width: width}"
  :disabled="disabled"
  :value-key="keywordAttr.id"
  @change="changeSelect"
  @clear="handleClear"
  @blur="handleBlur"
  @focus="handleFocus"
  @visible-change="handlerVisible"
 >
  <el-option
   v-for="item in keywordOptions"
   :key="item[keywordAttr.id]"
   :label="item[keywordAttr.label]"
   :value="obj? item: item[keywordAttr.value]"
   :disabled="item.disabled"
  >
   <slot :item="item"/>
  </el-option>
 </el-select>
</template>

<script>
export default {
 name: 'SelectRemote',
 props: {
  value: {
   type: [String, Object],
   default: ''
  },
  reserve: {
   type: Boolean,
   default: true
  },
  clear: {
   type: Boolean,
   default: false
  },
  disabled: {
   type: Boolean,
   default: false
  },
  multiple: {
   type: Boolean,
   default: false
  },
  selectLoading: {
   type: Boolean,
   default: false
  },
  width: {
   type: String,
   default: '100%'
  },
  keywordOptions: {
   type: Array,
   default: function() {
    return []
   }
  },
  keywordAttr: {
   type: Object,
   required: true,
   default: function() {
    return {
     id: '',
     label: '',
     value: ''
    }
   }
  },
  obj: {
   type: Boolean,
   default: false
  },
  placeholder: {
   type: String,
   default: function() { return '请输入关键词' }
  }
 },
 data() {
  return {
   keyword: this.value
  }
 },
 watch: {
  value(newVal) {
   this.keyword = newVal
  }
 },

 methods: {
  remoteMethod(query) {
   this.$emit('remoteMethod', query)
  },
  changeSelect(item) {
   this.$emit('changeSelect', item)
  },
  handleClear() {
   this.$emit('clear')
  },
  handleBlur() {
   this.$emit('blur')
  },
  handleFocus() {
   this.$emit('focus')
  },
  handlerVisible() {
   this.$emit('visible-change')
  }
 }
}
</script>

<style lang="scss" scoped>
.selected ::-webkit-input-placeholder{
 color: #606266 !important;
}
</style>

主要是使用了placeholder来显示;

在父组件中:

<SeletcRemote
       v-model="nodeOperate.saleEmp"
       :keyword-attr="nodeObjPerson"
       :keyword-options="empOptions"
       :clear="true"
       :obj="true"
       :select-loading="selectLoading"
       @remoteMethod="remoteMethod"
       @changeSelect="handleProductChange($event, nodeOperate, 'saleEmp')"
      />
nodeObjPerson: {
  id: 'id',
  label: 'empName'
  }
handleProductChange(val, row, field) {
   this.$set(row, field, val)
  }

可以在单选的的状态下完美解决了label显示值;

在多选状态下如何显示?

multipletrue时,暂时无法解决;只是使用了另一个组件:vue-multiselect

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

Javascript 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 #Javascript
vue项目中极验验证的使用代码示例
Dec 03 #Javascript
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
JS实现的雪花飘落特效示例
Dec 03 #Javascript
vue中实现高德定位功能
Dec 03 #Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 #Javascript
js实现时分秒倒计时
Dec 03 #Javascript
You might like
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
婚礼司仪主持词
2014/03/14 职场文书
大学生英语演讲稿
2014/04/24 职场文书
早恋主题班会
2015/08/14 职场文书