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 继承实现方法
Aug 26 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
PHP时间类完整代码实例
2021/02/26 PHP
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
python3实现读取chrome浏览器cookie
2016/06/19 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
flask实现验证码并验证功能
2019/12/05 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
大学生求职简历的自我评价范文
2013/10/12 职场文书
工程质量承诺书
2014/03/27 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
庆祝教师节主题班会
2015/08/17 职场文书