element plus自定义表单项
element plus如何创建自定义表单项呢?
一直有个疑问，为什么官方文档中，就没有自定义表单项的内容呢？从element ui到element plus貌似都没有，是官方就认定我们不需要自定义表单项，还是说他们觉得官方提供的组件本身已经完备到，不需要进行任何自定义的程度？
目标
能自定义表单项
表单进行验证时，自定义表单项也能被验证
自定义表单项的
bulr,focus之类事件触发时，也要能触发表单项的验证
自定义表单项组件: MyEleComp.vue
<!-- 自定义表单项组件 --> <script lang='ts' setup> import { inject } from 'vue' // eslint-disable-next-line import { elFormItemKey, elFormKey } from 'element-plus' // v-model相关定义, 用于接收外部和内部修改值再告知外部 defineProps<{ modelValue: string }>() // eslint-disable-next-line const emits = defineEmits({ 'update:modelValue': (val: string) => true }) // 获取element plus表单项的provide, 作用是用来触发表单项的验证 const elFormItem = inject(elFormItemKey, undefined) // const elForm = inject(elFormKey, undefined) console.log('>>>>>>>>>>>>>> elFormItem', elFormItem) // console.log('>>>>>>>>>>>>>> elForm', elForm) function onBlur() { console.log('elFormItem', elFormItem) // 手动触发表单项验证 elFormItem?.validate('blur') } function onChange(val: Event) { const inputEle: HTMLInputElement = val.target as HTMLInputElement console.log(inputEle.value, 'inputEle.value') // 告知外部, 这个表单项的值已经改变了 emits('update:modelValue', inputEle.value) } </script> <template> <input @blur='onBlur' @change='onChange' type='text' :value='modelValue'> </template> <style lang='scss' scoped> </style> 复制代码在表单中使用自定义表单项组件
<script lang='ts' setup> import { ElForm, ElFormItem, ElRadioGroup, ElRadio, ElInput, ElCheckboxGroup, ElTimePicker, ElSwitch, ElSelect, ElOption, ElDatePicker, ElButton, ElCheckbox, ElCol } from 'element-plus' import { reactive, ref } from 'vue' import MyEleComp from './MyEleComp.vue' const ruleForm = reactive({ x: 'xml' }) const rules = reactive({ x: [ { required: true, message: '请输入x', trigger: 'blur' } ] }) const ruleFormRef = ref<any>() function submitForm() { ruleFormRef.value.validate((valid: boolean) => { if (valid) { alert('submit!') } else { console.log('error submit!!') return false } }) } function resetForm() { ruleFormRef.value.resetFields() } </script> <template> <el-form ref='ruleFormRef' :model='ruleForm' :rules='rules' label-width='120px' class='demo-ruleForm' > <el-form-item label='你好' prop='x'> <!-- 这里引入的就是自定义表单项 --> <MyEleComp v-model='ruleForm.x'></MyEleComp> </el-form-item> <el-form-item> <el-button type='primary' @click='submitForm()'>提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </template>
作者：悟空和大王
链接：https://juejin.cn/post/7030946670758232078