<template> <div> <el-dialog title="编辑用户信息" :visible.sync="dialogEdit.show"> <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules"> <el-form-item label="日期" prop="date"> <el-date-picker v-model="form.date" type="date" placeholder="选择日期"> </el-date-picker> </el-form-item> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item label="标题" prop="title"> <el-input v-model="form.title"></el-input> </el-form-item> <el-form-item label="评价" prop="evaluate"> <el-input v-model="form.evaluate"></el-input> </el-form-item> <el-form-item label="状态" prop="state"> <el-input v-model="form.state"></el-input> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogEdit.show = false">取 消</el-button> <el-button type="primary" @click="dialogFormEdit('formEdit')">确 定</el-button> </div> </el-dialog> </div> </template> <script> export default { name: 'HelloWorld', props:{ dialogEdit:Object, form:Object }, data () { return { formrules:{ date:[{required:true,message:"日期不能为空",trigger:"blur"}], name:[{required:true,message:"用户名不能为空",trigger:"blur"}], email:[{required:true,message:"邮箱不能为空",trigger:"blur"}], } } }, methods:{ dialogFormEdit(formEdit) { this.$refs[formEdit].validate((valid) => { if (valid) { this.$axios.put(`:3000/data/${this.form.id}`,this.form).then(res => { this.$message({ type:"success", message:"编辑信息成功" }) console.log(res) this.dialogEdit.show = false; this.$emit('updateEdit') }) } else { console.log('error submit!!'); return false; } }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
以上这次全部的案例deom,在过程中有些说的不是很好，请见谅，如果喜欢，请多多关注
您可能感兴趣的文章: