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 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
Jquery解析json数据详解
Dec 26 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
简单分析javascript中的函数
Sep 10 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
JS实现简单日历特效
Jan 03 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
vue使用原生swiper代码实例
Feb 05 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设置允许大文件上传示例代码
2014/03/10 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Django框架视图函数设计示例
2019/07/29 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
辅导员评语
2014/05/04 职场文书
基层党员对照检查材料
2014/08/25 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL