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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
深入学习JavaScript中的bom
May 27 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
2014年公司庆元旦活动方案
2014/03/05 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
高三教师工作总结2015
2015/07/21 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书