1. Toy模板网首页
  2. > Toy博客

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除

10月前 作者：_BugMan 分类：Toy博客 阅读(47) 违法举报

这篇具有很好参考价值的文章主要介绍了【vue实战项目】通用管理系统：信息列表，信息的编辑和删除。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文为博主的vue实战小项目系列中的第七篇，很适合后端或者才入门的小伙伴看，一个前端项目从0到1的保姆级教学。前面的内容：

【vue实战项目】通用管理系统：登录页-CSDN博客

【vue实战项目】通用管理系统：封装token操作和网络请求-CSDN博客

【vue实战项目】通用管理系统：api封装、404页-CSDN博客

【vue实战项目】通用管理系统：首页-CSDN博客

【vue实战项目】通用管理系统：学生列表-CSDN博客

【vue实战项目】通用管理系统：信息列表，信息录入-CSDN博客

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

目录

1.概述

2.编辑

3.删除

4.完整组件代码

1.概述

上一篇文章，我们完成了信息列表的信息录入，本文将接着完成信息列表的编辑和删除。使用弹窗的方式来编辑某一列的信息：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

点击删除按钮来删除对应列的数据：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

因为是继续上文的组件中开发，所以工程目录和上文一样，不会有新的东西的加入：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

2.编辑

编辑使用的弹窗复用信息录入的弹窗即可。

可以看到在点击编辑按钮的时候传入了该行数据的：

<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>

所以在删除方法里，直接将该行数据渲染进弹窗即可：

edit(row) {
      this.form=row
      this.dialogFormVisible=true
    }

这里有个问题就是弹窗的title仍然是“添加学生信息”，明显不对，应该改成编辑学生信息：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

用一个状态来控制弹窗是新增还是修改：

true是添加，false是编辑

state:true,

新增和编辑分别去操作一下状态字段：

edit(row) {
      this.form=row
      this.dialogFormVisible=true
      this.state=false
    },
    del() {},
    addStudent() {
      this.state=true
      this.dialogFormVisible = true;
    },

弹框的title显示什么，用状态值来判断一下：

<el-dialog :title="state ? '添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="500px">

这个时候再去点击编辑，弹窗的title就会显示为正确的内容：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

这里还会有一个问题，就是点击编辑后，由于form被赋值了，这时候再去点新增，弹窗里会有值被填充,所以要在新增的方法里，处理一下form的值，进行初始化一下：

addStudent() {
      this.state=true
      this.dialogFormVisible = true;
      this.form={
        name: "",
        sex: "1",
        age: "",
        father: "",
        mather: "",
        address: "",
        time: "",
        phone: ""
      }
    },

然后会发现点击新增弹窗还是有问题：

触发了数据校验规则：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

由于是复用的一个弹窗，所以点击确定后调用的方法也是一个，所以要在确定方法中区分新增和编辑不同的逻辑，在编辑的情况下点击完确定要清除弹窗的校验规则。

    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()
              }
          })
        }
      });
    },

这个时候其实还存在一个隐藏的问题，就是点击新增按钮进行新增后，再点击新增按钮进行下一次新增，会出现根本就没有进行输入，弹窗的输入框的校验规则就被触发了的问题：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

这是因为在新增的时候，调用validate，触发了校验：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

所以要在下一次新录入的时候，不弹出校验警告，

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

在新增完后，也要进行校验规则的清楚：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

这里还有一个问题就是，在编辑时候，还没有点击确定，在输入信息的时候，整个列表的数据就跟着变了：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

这是因为在edit的时候，操作了全局公用的数据——form：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

这里改为操作form的副本即可：

 edit(row) {
      this.form = {...row};
      this.dialogFormVisible = true;
      this.state = false;
    },

修改后的效果：

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

最后封装一个关闭弹窗的方法：

closeInfo(from){
      this.$refs[from].resetFields()
      this.dialogFormVisible=false;
    },

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除,前端,vue.js,elementui,javascript,前端

3.删除

删除就很简单了，把所在行的id传给后端，后端删除即可。

api：

export function deleteInfo(id){
    return service({
        method:'delete',
        url:`/student/info/${id}`
    })
}

method：文章来源地址https://www.toymoban.com/news/detail-770551.html

del(row) {
      this.$alert('你确定要删除吗？','提示',{
        confirmButtonText:'确定',
        callback:()=>{
          console.log(row.id);
          deleteInfo(row.id).then(res=>{
            if(res.data.code===200){
              this.getData()
              this.$message({message:res.data.message,type:'success'})
            }
          })
        }
      })
    },

4.完整组件代码

<template>
  <div class="infoList">
    <!--新增按钮-->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="mini"
    >
      <el-form-item>
        <el-button type="primary" @click="addStudent">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="father" label="父亲" align="center">
      </el-table-column>
      <el-table-column prop="mather" label="母亲" align="center">
      </el-table-column>
      <el-table-column prop="address" label="家庭住址" align="center">
      </el-table-column>
      <el-table-column prop="time" label="入校时间" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--弹框-->
    <el-dialog
      :title="state ? '添加学生信息' : '修改学生信息'"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="父亲姓名"
          :label-width="formLabelWidth"
          prop="father"
        >
          <el-input v-model="form.father" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="母亲姓名"
          :label-width="formLabelWidth"
          prop="mather"
        >
          <el-input v-model="form.mather" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="家庭住址"
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="入校时间"
          :label-width="formLabelWidth"
          prop="date"
        >
          <el-date-picker
            v-model="form.time"
            format="yyyy 年 MM 月 dd日"
            value-format="yyyy-MM-dd"
            align="right"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="联系方式"
          :label-width="formLabelWidth"
          prop="phone"
        >
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sure('form')">确定</el-button>
        <el-button @click="closeInfo('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.code===200){
              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.dialogFormVisible=false;
    },
    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();
  },
};
</script>

<style lang="less">
.infoList {
  .demo-form-inline,
  .el-form-item {
    text-align: left;
  }
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>

到了这里，关于【vue实战项目】通用管理系统：信息列表，信息的编辑和删除的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 基于VUE3+Layui从头搭建通用后台管理系统（前端篇）一：项目规划及初始化

    基于VUE3+Layui从头搭建通用后台管理系统（前端篇）一：项目规划及初始化

      使用vue3+Layui实现通用管理系统前端，使用vue3+layui搭建系统UI界面，使用nodejs搭建模拟web服务器，使用echarts实现系统可视化模块，可以此项目为基础进行扩展开发，快速搭建管理系统，具体内容如下：    1. 常见功能实现： 实现用户登录（用户名密码登录、手机验证码

    2024年02月13日
    浏览(58)
  • vue项目实战-电商后台管理系统

    vue项目实战-电商后台管理系统

    该项目为电商后台的管理系统。设计了登录页面。 管理人员需要通过输入正确的用户名和密码才能登录。登陆成功之后进入管理页面： 管理页面由五个子模块组成：用户管理，权限管理，商品管理，订单管理，数据统计； 每个子模块有若干子模块组成，用户管理下-用户列表

    2024年02月03日
    浏览(89)
  • VsCode + CMake构建项目 C/C++连接Mysql数据库 | 数据库增删改查C++封装 | 信息管理系统通用代码 ---- 课程笔记

    VsCode + CMake构建项目 C/C++连接Mysql数据库 | 数据库增删改查C++封装 | 信息管理系统通用代码 ---- 课程笔记

    这个是B站Up主：程序员程子青的视频  C++封装Mysql增删改查操作_哔哩哔哩_bilibili https://www.bilibili.com/video/BV1m24y1a79o/?p=6spm_id_from=pageDrivervd_source=a934d7fc6f47698a29dac90a922ba5a3 安装mysql :mysql 下载和安装和修改MYSQL8.0 数据库存储文件的路径-CSDN博客 创建数据库和表： 参考这篇文章：w

    2024年01月19日
    浏览(50)
  • vue项目实战-脑图编辑管理系统kitymind百度脑图

    vue项目实战-脑图编辑管理系统kitymind百度脑图

    项目为前端vue项目，把kitymind百度脑图整合到前端vue项目中，显示了脑图的绘制，编辑，到处为json，png，text等格式的功能 文章末尾有相关的代码链接，代码只包含前端项目，在原始的项目中也编写了相关的接口，但是原先的后端项目是公司的，不方便公开出来，这里只提供

    2024年02月13日
    浏览(34)
  • 【Golang项目实战】用Go写一个学生信息管理系统,真的太酷啦| 保姆级详解，附源码——建议收藏

    【Golang项目实战】用Go写一个学生信息管理系统,真的太酷啦| 保姆级详解，附源码——建议收藏

    博主简介： 努力学习的大一在校计算机专业学生，热爱学习和创作。目前在学习和分享：数据结构、Go，Java等相关知识。 博主主页： @是瑶瑶子啦 所属专栏: Go语言核心编程 近期目标： 写好专栏的每一篇文章 学习了Go的基础语法知识，如何巩固和提升呢？跟着瑶瑶子写一个

    2024年02月02日
    浏览(56)
  • 【开源免费】Vue+SpringBoot打造图书管理系统，初学者入门实战项目

    【开源免费】Vue+SpringBoot打造图书管理系统，初学者入门实战项目

    作者主页 ：Designer 小郑 作者简介 ：3年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN博客专家，阿里云社区专家博主，蓝桥云课讲师。 文末获取源码，项目编号： S 066 。 color{red}{文末获取源码，项目编号：S066。} 文末获取源码，项目编

    2024年02月10日
    浏览(50)
  • 【开源免费】Vue+SpringBoot打造超市账单管理系统，初学者入门实战项目

    【开源免费】Vue+SpringBoot打造超市账单管理系统，初学者入门实战项目

    作者主页 ：Designer 小郑 作者简介 ：3年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN博客专家，阿里云社区专家博主，蓝桥云课讲师。 标题 说明 项目名称 超市账单管理系统 color{red}{超市账单管理系统} 超市账单管理系统 源码获取 ht

    2024年02月09日
    浏览(53)
  • 【项目实战】基于Vue3+TypeScript+Pinia的后台管理系统（coderwhy）

    【项目实战】基于Vue3+TypeScript+Pinia的后台管理系统（coderwhy）

    是基于Vue3、Pinia、VueRouter、Vite、ElementPlus、TypeScript、Echarts等后台系统 https://documenter.getpostman.com/view/12387168/TzzDKb12 baseURL = ‘http://codercba.com:5000’ postman详细使用可以自己搜 也可以使用其他接口管理的工具 给项目添加 环境变量 baseURL https://gitee.com/yangyang993/vue3_ts_cms_admin.git 登录

    2024年02月07日
    浏览(69)
  • 通俗易懂实现功能强大的实战项目 springboot+java+vue+mysql 汽车服务管理系统

    通俗易懂实现功能强大的实战项目 springboot+java+vue+mysql 汽车服务管理系统

    ✍✍计算机编程指导师 ⭐⭐个人介绍：自己非常喜欢研究技术问题！专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目：有源码或者技术上的问题欢迎在评论区一起讨论交流！ ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月16日
    浏览(40)
  • 通俗易懂实现功能强大的实战项目 springboot+java+vue+mysql 汽车租赁管理系统

    通俗易懂实现功能强大的实战项目 springboot+java+vue+mysql 汽车租赁管理系统

    ✍✍计算机编程指导师 ⭐⭐个人介绍：自己非常喜欢研究技术问题！专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目：有源码或者技术上的问题欢迎在评论区一起讨论交流！ ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月19日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包