要素UIフォームの送信ボタンがフォームになく、送信によって検証がトリガーされます

開発時には、フォームフォームの送信ボタンが必ずしもフォーム内にあるとは限らないため、ボタンがフォームフォームの外側にあるときに検証をトリガーする機能を実現する必要があります。次のようにコードを直接貼り付けます

html部分：

<el-button @click.native="handleSave">保存</el-button>
<el-form :model="messageForm" :rules="messageFormRules" ref="messageForm" label-width="75px">
	<el-col :span="12">
		<el-form-item label="名称：" prop="apiName">
			<el-input auto-complete="off" placeholder="请输入名称" v-model.trim="messageForm.apiName"></el-input>
		</el-form-item>
	</el-col>
	<el-col :span="12">
		<el-form-item label="分类：" prop="apiGroup">
			<el-select v-model="messageForm.apiGroup" placeholder="请选择分类">
			<el-option v-for="item in apiGroupList" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
		</el-form-item>
	</el-col>
</el-form>

jsパート：

export default {
    
    
	data () {
    
    
		return {
    
    
			messageForm: {
    
    
				apiName: '',
				apiGroup: '',
			},
			// 校验规则
			messageFormRules: {
    
    
				apiName: [{
    
    
					required: true,
					message: '请输入名称',
					trigger: 'blur'
				}],
				apiGroup: [{
    
    
					required: true,
					message: '请选择分类',
					trigger: 'blur'
				}],
			}
		},
		methods: {
    
    
			// 保存
			handleSave () {
    
    
				this.$refs['messageForm'].validate((valid) => {
    
    
					if (valid) {
    
    
					
					} else {
    
    
						return false;
					}
				});
			}
		}
	}
}

保存ボタンをクリックして、フォームの検証をトリガーします