封装el-selected_综合

在开发项目中，发现表单上有很多el-selected组件，于是，倒不如把它封装起来，减少代码量，可以实现复用。

SelectedPackage组件：

<template><div><el-selectv-if="selectedData.type==='select'"v-model="selectedValue":multiple="selectedData.multiple"collapse-tagsclearable:disabled="selectedData.isDisabled":placeholder="selectedData.placeholder"@change="changeHandle"><el-optionv-for="item in selectedData.options":key="item.value":label="item.label":value="item.value":disabled="item.isDisabled"/></el-select></div>
</template><script>export default {name: "SelectedPack",props: {selectedData: {type: Object,required: true}},// watch: {//     selectedValue: {//         handle(newVal,oldVal){//             this.$emit('selectedValue',newVal)//         }//     }// },data() {return {selectedValue: '', // 选择的值}},methods: {changeHandle(val) {this.$emit('selectedValue',val)}}}
</script><style scoped></style>

在父组件中的引用：

<selected-pack :selectedData="selectedData" @selectedValue="getSelectedValue"></selected-pack>

data(){return{selectedData: {type: 'select',value: 'huaian',multiple: false,isDisabled: false,placeholder: '请选择',options: [{name: '上海', value: 'shanghai'},{name: '北京', value: 'beijing'},{name: '淮安', value: 'huaian'}]}}
},
methods：{getSelectedValue(val) {this.$notify.info({message: val})}
}

好啦，这样就可以实现复用了：

效果图：

图片.png