el-select 封装

这里打算封装一个全局el-select组件

MySelect.vue

<template>
  <el-select
    v-if="options.length!==0"
    :value="value"
    @input="$emit('input',$event)"
    :placeholder="placeholder"
    clearable
  >
    <el-option
      v-for="item in options"
      :key="item[optionVal]"
      :label="item[label]"
      :value="item[optionVal]"
    ></el-option>
  </el-select>
</template>
<script>
export default {
  name: "MySelect",
  props: {
    options: {
      type: Array,
      required: true
    },
    // 绑定value是为了外面也可以传值改变到里面的值双向绑定
    value: {
      type: [String, Number,]
    },
    placeholder: {
      type: String,
      default: "请选择~~"
    },
    //optionVal options里面每项对象的值
    optionVal: {
      type: [Number, String],
      default: "optionVal"
    },
    //lable options里面每项对象的标签
    label: {
      type: String,
      default: "lable"
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
</style>

index.js

import MySelect from "./MySelect";
const compName = MySelect.name; //获取组件的名字 当做全局组件名字使用

const mySelect = {
  install(Vue) {
    Vue.component(compName, MySelect);
  }
};
export default mySelect;

main.js

import MySelect from './components/globalComponents/myselect/index'
Vue.use(MySelect)

使用

 <my-select :options='options' option-val='value' label='label' v-model="defaultVal"></my-select>