网站优化服务,百度收录什么网站吗,麻章网站建设公司,设计本室内设计师网本文为博主的vue实战小项目系列中的第七篇#xff0c;很适合后端或者才入门的小伙伴看#xff0c;一个前端项目从0到1的保姆级教学。前面的内容#xff1a;
【vue实战项目】通用管理系统#xff1a;登录页-CSDN博客
【vue实战项目】通用管理系统#xff1a;封装token操作…本文为博主的vue实战小项目系列中的第七篇很适合后端或者才入门的小伙伴看一个前端项目从0到1的保姆级教学。前面的内容
【vue实战项目】通用管理系统登录页-CSDN博客
【vue实战项目】通用管理系统封装token操作和网络请求-CSDN博客
【vue实战项目】通用管理系统api封装、404页-CSDN博客
【vue实战项目】通用管理系统首页-CSDN博客
【vue实战项目】通用管理系统学生列表-CSDN博客
【vue实战项目】通用管理系统信息列表信息录入-CSDN博客 目录
1.概述
2.编辑
3.删除
4.完整组件代码 1.概述
上一篇文章我们完成了信息列表的信息录入本文将接着完成信息列表的编辑和删除。使用弹窗的方式来编辑某一列的信息 点击删除按钮来删除对应列的数据 因为是继续上文的组件中开发所以工程目录和上文一样不会有新的东西的加入 2.编辑
编辑使用的弹窗复用信息录入的弹窗即可。
可以看到在点击编辑按钮的时候传入了该行数据的
el-table-column label操作template slot-scopescopeel-buttonclickedit(scope.row)typedangersizeminiiconel-icon-edit/el-buttonel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column
所以在删除方法里直接将该行数据渲染进弹窗即可
edit(row) {this.formrowthis.dialogFormVisibletrue}
这里有个问题就是弹窗的title仍然是“添加学生信息”明显不对应该改成编辑学生信息 用一个状态来控制弹窗是新增还是修改
true是添加false是编辑
state:true,
新增和编辑分别去操作一下状态字段
edit(row) {this.formrowthis.dialogFormVisibletruethis.statefalse},del() {},addStudent() {this.statetruethis.dialogFormVisible true;},
弹框的title显示什么用状态值来判断一下
el-dialog :titlestate ? 添加学生信息:修改学生信息 :visible.syncdialogFormVisible width500px
这个时候再去点击编辑弹窗的title就会显示为正确的内容 这里还会有一个问题就是点击编辑后由于form被赋值了这时候再去点新增弹窗里会有值被填充,所以要在新增的方法里处理一下form的值进行初始化一下
addStudent() {this.statetruethis.dialogFormVisible true;this.form{name: ,sex: 1,age: ,father: ,mather: ,address: ,time: ,phone: }},
然后会发现点击新增弹窗还是有问题
触发了数据校验规则 由于是复用的一个弹窗所以点击确定后调用的方法也是一个所以要在确定方法中区分新增和编辑不同的逻辑在编辑的情况下点击完确定要清除弹窗的校验规则。 sure(form) {this.$refs[form].validate((valid) {if (this.state) {if (valid) {info(this.form).then((res) {if (res.data.code 200) {this.getData()//新增成功后关闭窗口this.dialogFormVisible false;}});}}else{updateInfo(this.form).then(res{if (res.data.code 200) {this.getData()//修改成功后关闭窗口this.dialogFormVisible false;//清除校验规则this.$refs[form].resetFields()}})}});},
这个时候其实还存在一个隐藏的问题就是点击新增按钮进行新增后再点击新增按钮进行下一次新增会出现根本就没有进行输入弹窗的输入框的校验规则就被触发了的问题 这是因为在新增的时候调用validate触发了校验 所以要在下一次新录入的时候不弹出校验警告 在新增完后也要进行校验规则的清楚 这里还有一个问题就是在编辑时候还没有点击确定在输入信息的时候整个列表的数据就跟着变了 这是因为在edit的时候操作了全局公用的数据——form 这里改为操作form的副本即可 edit(row) {this.form {...row};this.dialogFormVisible true;this.state false;},
修改后的效果 最后封装一个关闭弹窗的方法
closeInfo(from){this.$refs[from].resetFields()this.dialogFormVisiblefalse;}, 3.删除
删除就很简单了把所在行的id传给后端后端删除即可。
api
export function deleteInfo(id){return service({method:delete,url:/student/info/${id}})
}
method
del(row) {this.$alert(你确定要删除吗,提示,{confirmButtonText:确定,callback:(){console.log(row.id);deleteInfo(row.id).then(res{if(res.data.code200){this.getData()this.$message({message:res.data.message,type:success})}})}})},
4.完整组件代码
templatediv classinfoList!--新增按钮--el-form:inlinetrue:modelformInlineclassdemo-form-inlinesizeminiel-form-itemel-button typeprimary clickaddStudent新增/el-button/el-form-item/el-formel-table :datatableData border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propsex label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propaddress label家庭住址 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter/el-table-columnel-table-column label操作template slot-scopescopeel-buttonclickedit(scope.row)typedangersizeminiiconel-icon-edit/el-buttonel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column/el-table!--弹框--el-dialog:titlestate ? 添加学生信息 : 修改学生信息:visible.syncdialogFormVisiblewidth500pxel-form :modelform :rulesrules refformel-form-item label姓名 :label-widthformLabelWidth propnameel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 :label-widthformLabelWidth propsexel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label年龄 :label-widthformLabelWidth propageel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-itemlabel父亲姓名:label-widthformLabelWidthpropfatherel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-itemlabel母亲姓名:label-widthformLabelWidthpropmatherel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-itemlabel家庭住址:label-widthformLabelWidthpropaddressel-input v-modelform.address autocompleteoff/el-input/el-form-itemel-form-itemlabel入校时间:label-widthformLabelWidthpropdateel-date-pickerv-modelform.timeformatyyyy 年 MM 月 dd日value-formatyyyy-MM-ddalignrighttypedateplaceholder选择日期/el-date-picker/el-form-itemel-form-itemlabel联系方式:label-widthformLabelWidthpropphoneel-input v-modelform.phone autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clicksure(form)确定/el-buttonel-button clickcloseInfo(form)取 消/el-button/div/el-dialog/div
/template
script
import { info } from /api/api;
import { getInfo } from /api/api;
import { updateInfo } from /api/api;
import {deleteInfo} from /api/api ;
export default {data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible: false,form: {id:,name: ,sex: 1,age: ,father: ,mather: ,address: ,date: ,phone: ,},rules: {name: [{ required: true, message: 请输入姓名 }],sex: [{ required: true, message: 请输入性别 }],age: [{ required: true, message: 请输入年龄 }],address: [{ required: true, message: 请输入地址 }],time: [{ required: true, message: 请输入入学时间 }],phone: [{ required: true, message: 请输入联系方式 }],},state: true,formLabelWidth: 80px,};},methods: {edit(row) {this.form {...row};this.dialogFormVisible true;this.state false;},del(row) {this.$alert(你确定要删除吗,提示,{confirmButtonText:确定,callback:(){console.log(row.id);deleteInfo(row.id).then(res{if(res.data.code200){this.getData()this.$message({message:res.data.message,type:success})}})}})},addStudent() {this.state true;this.dialogFormVisible true;this.form {name: ,sex: 1,age: ,father: ,mather: ,address: ,time: ,phone: ,};},closeInfo(from){this.$refs[from].resetFields()this.dialogFormVisiblefalse;},sure(form) {this.$refs[form].validate((valid) {if (this.state) {if (valid) {info(this.form).then((res) {if (res.data.code 200) {this.getData()//新增成功后关闭窗口this.dialogFormVisible false;//清楚校验规则this.$refs[form].resetFields()}});}}else{updateInfo(this.form).then(res{if (res.data.code 200) {this.getData()//修改成功后关闭窗口this.dialogFormVisible false;//清空校验规则this.$refs[form].resetFields()}})}});},getData() {getInfo().then((res) {if (res.data.code 200) {this.tableData res.data.data;}});},},created() {this.getData();},
};
/scriptstyle langless
.infoList {.demo-form-inline,.el-form-item {text-align: left;}.el-pagination {text-align: left;margin-top: 20px;}
}
/style
