element-ui选择器的二次封装

对element的二次封装主要是提高组件的复用性,降低代码的复杂,引用的组件只需要传入必要的data参数和settings配置以及@select事件即可

<template>
    <div class="select-container">
      <span v-if="settings.title">{{settings.title}}</span>
      <el-select
        v-model="value"
        :size="settings.size||'mini'"
        :style="{width:settings.width}"
        @change="handeleChange"
        :placeholder="settings.placeholder"
        :multiple="settings.isMultiple"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label||item.value"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
</template>

<script>
/* 
  settings:{
      placeholder 提示语,默认 "请选择"
      isSelected 是否以选项第一个作为当前项,默认false
      isMultiple 是否多选,默认false,
      title   选择器名称,
      size: 选择器尺寸,默认mini
      width 选择器宽度,默认element-ui自带的默认宽度
  }
  options:[
      { value 必填 , label 选填,如果不传,以value的值展示 }
  ]

*/

export default {
name: "",
props: {
  data: { type: Array, default: () => [], required: true },
  settings: {
    type: Object,
    default: () => {
      return {
        placeholder: "请选择",
        isSelected: false,
        isMultiple: false,
        title: "",
        size: "mini"
      };
    }
  }
},
data() {
  return {
    value: this.settings.isSelected ? this.options[0].value : ""
  };
},
methods: {
  handeleChange(e) {
    this.$emit("select", e);
  }
}
};
</script>

<style  scoped>
.select-container {
width: 15%;
}
</style>

使用实例

<template>
  <div>
    <v-select :data="options" :settings="settings"  @select="handleSelect" />
  </div>
</template>

<script>
import vSelect from "@/components/Select";
export default {
  name: "",
  data() {
    return {
      options: [
        { value: "选项1" },
        { value: "选项2" },
        { value: "选项3" },
        { value: "选项4" },
        { value: "选项5" }
      ],
      settings: { title: "选择器" }
    };
  },
  components: { vSelect },
  methods: {
    handleSelect(e) {
      console.log(e);
    }
  }
};
</script>