自定义组件实现v-model,并通过element的form表单校验
做项目时,我们经常会遇到表单项不单单是input,select框这些基础表单项,有时候会在表单里出现一些较为复杂的自定义组件,比如下图中的插槽类型组件:
插槽组件我实现了v-model的用法,代码如下:
slotTypeSelector:
1 23 <div 4 class="item" 5 :class="activeSlotType === '1' ? 'actived' : ''" 6 @click="handleSelectSlotType('type1', '1')" 7 > 810 <div 11 class="item" 12 :class="activeSlotType === '2' ? 'actived' : ''" 13 @click="handleSelectSlotType('type2', '2')" 14 > 159 16 17 18
父组件使用方式如下:
12form 3 ref="slotRuleForm" 4 :model="dialogFormData" 5 :schema="dialogFormSchema" 6 :options="dialogFormOptions" 7 :dialog-visible="dialogVisible" 8 :dialog-form-title="dialogFormTitle" 9 :dialog-form-width="dialogFormWidth" 10 :label-position="labelPosition" 11 :rules="rules" 12 @beforeClose="beforeClose" 13 > 14 item 15 slot="slotType" 16 ref="slotTypeRef" 17 label="插槽类型" 18 label-width="100px" 19 prop="slotType" 20 > 21 22 2327保 存 24预 览 25关 闭 26此时,v-mode的用法已经实现。
接下来就是自定义的插槽类型组件要通过form表单的校验。网上查询了很多资料,得知
组件 slotTypeSelector在 value props 变化时,没有触发 el-form 表单的 validate 表单校验。
于是想办法去触发el-form 表单的 validate 表单校验。
代码如下:
methods: { handleSlotTypeChanged(value) { // 添加change事件回调,为了emit这个'el.form.change'事件! this.$refs.slotTypeRef.$emit('el.form.change', value); // 重点!自定义组件使用element的form表单校验 },slotType: [ { required: true, message: "请选择插槽类型", trigger: ["change"], }, ],至此就大功告成了!!!