你是一个前段工程师,帮我生成一份Vue代码,要求界面运用elementui,助学金评选对成绩和家庭条件有要求,请实现:用户输入姓名、各科成绩和贫困情况,点击按钮之后判断是否达到评助学金条件。假设课程数量为5门。助学金评选条件:平均分80分以上;无挂科;属于贫困户。
时间: 2024-03-23 21:38:42 浏览: 51
基于Vue的Element UI表单设计及代码生成器设计源码
好的,根据您的要求,我为您生成了一个简单的Vue代码,界面使用了ElementUI组件库。代码如下:
```html
<template>
<div class="wrapper">
<el-form :model="form" ref="form" :rules="rules" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="语文成绩" prop="chinese">
<el-input v-model="form.chinese"></el-input>
</el-form-item>
<el-form-item label="数学成绩" prop="math">
<el-input v-model="form.math"></el-input>
</el-form-item>
<el-form-item label="英语成绩" prop="english">
<el-input v-model="form.english"></el-input>
</el-form-item>
<el-form-item label="物理成绩" prop="physics">
<el-input v-model="form.physics"></el-input>
</el-form-item>
<el-form-item label="是否为贫困户" prop="poor">
<el-radio-group v-model="form.poor">
<el-radio label="是">是</el-radio>
<el-radio label="否">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">确定</el-button>
</el-form-item>
</el-form>
<el-dialog :visible.sync="dialogVisible">
<span v-if="isQualified">恭喜您,您符合助学金评选条件!</span>
<span v-else>很遗憾,您不符合助学金评选条件。</span>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
chinese: '',
math: '',
english: '',
physics: '',
poor: '否'
},
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
chinese: [
{ required: true, message: '请输入语文成绩', trigger: 'blur' },
{ type: 'number', message: '成绩必须为数字值', trigger: 'blur' }
],
math: [
{ required: true, message: '请输入数学成绩', trigger: 'blur' },
{ type: 'number', message: '成绩必须为数字值', trigger: 'blur' }
],
english: [
{ required: true, message: '请输入英语成绩', trigger: 'blur' },
{ type: 'number', message: '成绩必须为数字值', trigger: 'blur' }
],
physics: [
{ required: true, message: '请输入物理成绩', trigger: 'blur' },
{ type: 'number', message: '成绩必须为数字值', trigger: 'blur' }
]
},
dialogVisible: false,
isQualified: false
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
let totalScore =
Number(this.form.chinese) +
Number(this.form.math) +
Number(this.form.english) +
Number(this.form.physics);
let averageScore = totalScore / 4;
if (
averageScore >= 80 &&
this.form.chinese !== '' &&
this.form.math !== '' &&
this.form.english !== '' &&
this.form.physics !== '' &&
this.form.poor === '是'
) {
this.isQualified = true;
} else {
this.isQualified = false;
}
this.dialogVisible = true;
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
<style>
.wrapper {
margin: 20px;
}
</style>
```
该代码实现了用户输入姓名、各科成绩和贫困情况,点击按钮之后判断是否达到评助学金条件的功能。其中,助学金评选条件为:平均分80分以上;无挂科;属于贫困户。用户输入的信息会通过表单验证,确保输入的数据格式正确。评选结果会在弹出框中显示,用户可以关闭弹出框。希望这份代码能够帮到您!
阅读全文