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>