Vue Eelement-UI 组件二次封装(二):Select选择器

tech2023-08-09  121

select选择器是常用的element组件之一,根据我在开发中常用的一些属性,进行了如下修改:

// selecet.vue <template lang="html"> <div> <el-select v-model="value" :placeholder="placeholder" :disabled="disable" @change="change" :filterable="filterable" :clearable="clearable" :size="size"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script> export default { // 使用计算属性用于回显问题 computed: { value:{ get(){ return this.$attrs.option || '' }, set(){} }, // 是否禁用 disable(){ return this.$attrs.disable || false }, // 下拉选列表 options(){ return this.$attrs.optionList; }, // 输入框尺寸 size() { return this.$attrs.size }, // 提示信息 placeholder(){ return this.$attrs.placeholder || '请选择' }, // 是否可搜索 filterable(){ return this.$attrs.filterable === false ? this.$attrs.filterable : true }, //是否可以清空选项 clearable(){ return this.$attrs.clear || false } }, methods: { change(val) { this.$emit('changeOption',val); }, } } </script>

在全局调用:

<new-select :optionList="attestTypeList" :option="snmpAuthType" @changeOption="changeSnmpAuthType"></new-select>

其中,

data(){ return { attestTypeList: [{label: 'MD5',value:'0'},{label: 'SHA',value:'1'},{label: 'SHA224',value:'2'},{label: 'SHA256',value:'3'},{label: 'SHA384',value:'4'},{label: 'SHA512',value:'5'}], snmpAuthType: '', } }, methods: { changeSnmpAuthType(val){ this.snmpAuthType = val; }, }

注意事项: 数组的数据格式需要固定,同时可自行引入自己需要的属性。

最新回复(0)