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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
js表头排序实现方法
Jan 16 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JS库之Waypoints的用法详解
Sep 13 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
用于table内容排序
2006/07/21 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
python reverse反转部分数组的实例
2018/12/13 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
教师的实习鉴定
2013/12/15 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
大学社团活动策划书
2014/01/26 职场文书
技术股东合作协议书
2014/12/02 职场文书
工作收入证明模板
2015/06/12 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python