今天收到一个需求在输入框中展示在弹窗选中的数据，输入框只做展示

直接上代码

<template>
<Form ref="form" :model="formData" :rules="rules"><FormItem prop="readOnlyInput"><Input v-model="formData.readOnlyInput" readonly ><template #append><span @click="open('1')">+</span></template></Input></FormItem><Button @click="submitForm">提交</Button>
</Form>
</template>
<script>export default {components:{PhoneModal},data() {return {formData: {readOnlyInput: ''},rules: {readOnlyInput: [{ required: true, message: '此输入框为必填项', trigger: 'blur' },{ validator: this.validateReadOnlyInput, trigger: 'blur' }]},showModal:false,dataType:'',selecTabletData:[],};},methods: {validateReadOnlyInput(rule, value, callback) {if (this.formData.readOnlyInput === '') {callback(new Error('输入框为只读且必填，请联系管理员'));} else {callback();}},submitForm() {this.$refs.form.validate((valid) => {if (valid) {// 提交表单} else {// 表单验证失败}});}},};</script>

这时验证会出现设置的trigger不触发，不能自动校验，验证不刷新

在提交后手动清除校验

this.$refs.formData.clearValidate()

 移除校验结果并重置字段值

this.$refs["formData"].resetFields();