vue实现form表单中一行数据判断正常,异常,异常时生成异常按钮,点击并生成弹窗,弹窗渲染表单数据
时间: 2023-05-22 18:00:38 浏览: 86
可以使用v-if指令来判断表单数据是否正常,如果不正常则显示异常按钮,并绑定一个点击事件,点击事件中可以使用element-ui组件库中的Dialog组件来生成弹窗并渲染表单数据。具体实现代码如下:
<template>
<div>
<el-form :model="form" ref="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button v-if="!isFormValid" type="danger" @click="showErrorDialog">异常</el-button>
</el-form-item>
</el-form>
<el-dialog :visible.sync="errorDialogVisible" title="表单数据异常">
<el-form :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name" disabled></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="form.age" disabled></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender" disabled>
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
gender: ''
},
isFormValid: true,
errorDialogVisible: false
}
},
methods: {
submitForm() {
// 表单验证逻辑
if (this.form.name === '' || this.form.age === '' || this.form.gender === '') {
this.isFormValid = false
} else {
this.isFormValid = true
// 提交表单逻辑
}
},
showErrorDialog() {
this.errorDialogVisible = true
}
}
}
</script>