vue2 组件封装 el-select

基本使用，复杂需要自行扩展

 

组件部分

<template>
  <el-select
    v-model="selectedValue"
    v-bind="$attrs"
    v-on="$listeners"
    :multiple="multiple"
    :filterable="filterable"
    :remote="remote"
    :remote-method="handleRemote"
    :loading="loading"
    :clearable="clearable"
    :style="selectStyle"
    @change="handleChange"
    @clear="handleClear"
  >
    <!-- 普通选项 -->
    <el-option
      v-for="item in options"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]"
    />
    <slot></slot>
  </el-select>
</template>

<script>
export default {
  name: "CustomSelect",
  props: {
    // 绑定值
    value: {
      type: [String, Number, Array],
      default: "",
    },
    // 选项列表
    options: {
      type: Array,
      default: () => [],
    },
    // 占位符
    placeholder: {
      type: String,
      default: "请选择",
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 是否可搜索
    filterable: {
      type: Boolean,
      default: false,
    },
    // 是否远程搜索
    remote: {
      type: Boolean,
      default: false,
    },
    // 远程加载函数
    remoteMethod: {
      type: Function,
      default: () => {},
    },
    // 是否正在加载
    loading: {
      type: Boolean,
      default: false,
    },
    // 是否可清空
    clearable: {
      type: Boolean,
      default: true,
    },
    // 选项的标签字段名
    labelKey: {
      type: String,
      default: "label",
    },
    // 选项的值字段名
    valueKey: {
      type: String,
      default: "value",
    },
    // 自定义样式
    selectStyle: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    // 双向绑定处理
    selectedValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    // 远程搜索触发
    handleRemote(query) {
      this.$emit("remote", query);
      this.remoteMethod(query);
    },
    // 值改变触发
    handleChange(val) {
      this.$emit("change", val);
    },
    // 清空触发
    handleClear() {
      this.$emit("clear");
    },
  },
};
</script>

<style scoped>
/* 可添加自定义样式 */
.el-select {
  width: 100%;
}
</style>

 

 

页面使用

<my-select  v-model="value1"  :options="options">