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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
jquery 插件学习(二)
Aug 06 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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 adodb连接不同数据库
2009/03/19 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php生成扇形比例图实例
2013/11/06 PHP
Linux中为php配置伪静态
2014/12/17 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP实现简易blog的制作
2016/10/24 PHP
常用js脚本
2006/12/03 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
运动会邀请函范文
2014/01/31 职场文书
企业2014年度工作总结
2014/12/10 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
指导教师推荐意见
2015/06/05 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
python解析json数据
2022/04/29 Python