element-ui 远程搜索组件el-select在项目中组件化

在项目中发现使用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

原文链接:segmentfault.com

上一篇:vue vant Area组件使用
下一篇:axios 源码学习

相关推荐

  • (独家!)webpack 5 changelog 全文翻译

    ★ webpack 团队于北京时间 10 月 12 日凌晨发布了 版本,本文译自 。此部分主要面向非插件开发的 webpack 使用者。 ” 简要说明 此版本重点关注以下内容: ...

    9 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • 魔方实时通信一对一音视频组件

    魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎 魔方实时通信,请点击这个(https://www.shixincube.com/) 继上一个im聊天组件增加了发动语音,语音...

    2 年前
  • 高阶组件之属性代理

    新组件类继承子React.component类,对传入的组件进行一系列操作,从而产生一个新的组件,达到增强组件的作用 操作props 访问ref 抽取state 封装组件 ...

    1 年前
  • 高阶组件HOC - 小试牛刀

    1. 前言 老毕曾经有过一句名言,叫作“国庆七天乐,Coding最快乐~”。所以在这漫漫七天长假,手痒了怎么办?于是乎,就有了接下来的内容。。。 2. 一个中心 今天要分享的内容有关高阶组件...

    2 年前
  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀(https://github.com/SmallStoneSK/Blog/issues/6)尝到高价组件的甜头之后,现已深陷其中无法自拔。。。

    2 年前
  • 高阶函数&amp;&amp;高阶组件

    高阶函数 特点: 接受函数类型的参数。 返回值是函数。 高阶函数具有可扩展性。 常见的高阶函数: 定时器 setTimeout(); setInterval() Promise(); 数组相关:...

    4 个月前
  • 高级 Angular 组件模式 (3b)

    03b Enhance Components with Directives 原文: Enhance Components with Directives(https://blog.angula...

    2 年前

官方社区

扫码加入 JavaScript 社区