项目中有很多自己封装的组件，如富文本组件，文件上传，图片上传等。而这些组件在表单中常常会在新增和编辑的场景应用。而且Element Plus官网展示demo都是基于Element Plus表单组件的，并没有演示非Element Plus表单组件，下面代码将演示如何实现非Element Plus的Vue组件触发ElForm的表单校验

自定义组件代码: ax-input-test.vue 
<template>
    <input v-model="value" placeholder="请输入">
</template>
<script lang="ts">
import { computed } from 'vue'
import { useFormItem } from 'element-plus'
export default {
  name: "ax-input-test",
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup(props: any, { emit}) {
    const { formItem } = useFormItem()
    const value = computed({
        get() {
            return props.modelValue
        },
        set(val) {
            emit('update:modelValue', val)
            formItem?.validate('blur')
        }
    })
    return {
        value
    }
  }
}
</script>

使用组件的代码edit-user-confirm.vue

<template>
            <div class="body">
                <el-form
                    ref="formRef"
                    :model="userForm"
                    label-width="120px"
                    :rules="formRules"
                >
                    <el-form-item label="昵称:" prop="nickName">
                        <ax-input-test
                            class="content-input"
                            v-model="userForm.nickName"
                            placeholder="请输入您的昵称"
                        ></ax-input-test>
                    </el-form-item>
                    <div class="bottom-box">
                        <div class="btn-box">
                            <el-button type="primary" @click="onSubmit(formRef)">确认</el-button>
                        </div>
                    </div>
                </el-form>
            </div>
</template>

<script lang="ts">
import {reactive, ref, defineComponent} from 'vue';
import AxInputTest from '@/components/ax-input-test.vue'
export default defineComponent({
    name: "edit-user-confirm",
    components: {
        AxInputTest
    },
    emits: ['closeConfirm', 'saved'],
    setup(props, {emit}) {
        const formRules = reactive({
            nickName: [
                {
                    required: true,
                    message: '昵称不能为空',
                    trigger: 'blur',
                }
            ]
        });
        const userForm = reactive({
            nickName: ''
        });
        const onSubmit = (formRef) => {
            formRef.validate((valid) => {
                if (valid) {
                    //保存数据到接口
                }
            });
        };
        // 取消
        const onCancel = () => {
            emit('closeConfirm');
        }
        const formRef = ref(null);
        return {
            userForm,
            formRules,
            onSubmit,
            formRef,
            onCancel
        }
    }
})
</script>

 

原文地址：http://www.cnblogs.com/wangacan/p/16895397.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性