首页 ›  文章

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

2019-12-03

在项目中发现使用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 源码学习
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入