vue实现关闭时表单清除

使用方法:

clearValidate移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组,如不传则移除整个表单的校验结果Function(props: array | string)

具体实现代码

1.为会话框添加关闭事件

<el-dialog
  title="添加用户"
  :visible.sync="addDialogVisible"
  width="50%" @close="addDialogClosed">

2.在methods中设置关闭方法

// 监听添加用户对话框的关闭事件
addDialogClosed(){
  // 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
 this.$refs.addFormRef.resetFields()
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现学生成绩表单可以按照以下步骤进行: 1. 安装Vue:打开命令行工具,输入以下命令安装Vue ``` npm install vue ``` 2. 创建Vue实例:在HTML文件中引入Vue,并创建Vue实例 ``` <!DOCTYPE html> <html> <head> <title>学生成绩表单</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <table> <thead> <tr> <th>姓名</th> <th>语文成绩</th> <th>数学成绩</th> <th>英语成绩</th> <th>总分</th> <th>平均分</th> </tr> </thead> <tbody> <tr v-for="student in students"> <td>{{ student.name }}</td> <td>{{ student.chinese }}</td> <td>{{ student.math }}</td> <td>{{ student.english }}</td> <td>{{ student.total }}</td> <td>{{ student.average }}</td> </tr> </tbody> </table> </div> <script> var app = new Vue({ el: '#app', data: { students: [ { name: '张三', chinese: 90, math: 85, english: 92 }, { name: '李四', chinese: 85, math: 92, english: 88 }, { name: '王五', chinese: 92, math: 90, english: 95 } ] }, computed: { // 计算总分和平均分 studentsWithScore: function() { var students = this.students; for (var i = 0; i < students.length; i++) { var student = students[i]; student.total = student.chinese + student.math + student.english; student.average = student.total / 3; } return students; } } }); </script> </body> </html> ``` 3. 创建表格:在Vue实例中创建一个students数组,里面包含每个学生的姓名、语文成绩、数学成绩和英语成绩。 4. 计算总分和平均分:在Vue实例中创建一个computed属性studentsWithScore,通过遍历students数组,计算出每个学生的总分和平均分。 5. 渲染表格:在HTML文件中使用v-for指令渲染表格,使用mustache语法显示每个学生的姓名、语文成绩、数学成绩、英语成绩、总分和平均分。 这样,就可以通过Vue实现一个简单的学生成绩表单了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值