Vue + Element UI 实现对表格的增加，删除以及修改功能（附代码+整体思路） |
您所在的位置：网站首页 › 怎么取消const › Vue + Element UI 实现对表格的增加，删除以及修改功能（附代码+整体思路） |
Vue + Element UI 实现对表格的增加，删除以及修改功能（附代码+整体思路）
|
Vue + Element UI 实现对表格的增加，删除以及修改功能 --柚子真好吃
一、表格代码准备二、增加功能三、修改功能四、删除功能五、源代码
该文章在表格成功展示的基础上进行维护，包含整体设计思路适用于新人上手。
表格构建请参考我的上一篇文章：Vue 使用 ElementUI 构建表格 点击跳转 文章源码参考：https://github.com/Recklesslmz/elementUI 一、表格代码准备 首先在template中定义表格，代码如下 数据绑定 在data中添加以下代码，如果有需求可从后台获取。（数据自拟） data() { return { loading: true, tableData: [{ id: '1001', name: 'Tom', date: '2019-11-26', address: '猫窝', }, { id: '1002', name: 'Jerry', date: '2019-11-26', address: '鼠洞', }, { id: '1003', name: 'Spike', date: '2019-11-26', address: '狗窝', },], } } 表格展示，如下图。
二、增加功能
编写增加按钮
新增
从这开始我们来细细的一步一步走，争取不出错。（只能是争取） 当我们点击新增的时候需要弹出一个对话框，其中可以让我们填写各种信息，然后确定，这样才能够将数据添加。故需要编写一个dialog来存放这些东西。 编写自定义dialog，目的是点击按钮展示该对话框，代码如下。 取 消 确 定界面图如下 此代码的作用为控制该dialog的展示与隐藏，所以我们需要在data中添加‘zdydialog’ data() { return { zdydialog: false, form : {}, } }设置为false的目的是 当页面加载时，对话框不展示，当用户点击‘新增’按钮时，弹出对话框。 form的作用下面会讲。 add方法编写 methods: { add() { this.form = { id: '', name: '', date: '', address: '' } this.zdydialog = true } }这里需要做一下解释，为什么要将form中全部的key对应的value设置为空。 原因是我们的form表单连接的是data中的form，当我们单击新增按钮时，需要将展示框中的input标签里的内 容清空，供用户添加信息。（注：input标签中的v-model中的属性名要跟data中的相对应） submit提交方法当用户输入完要添加的信息后，如下图。 如果不进行日期转换，我们来alert一下，效果如下。 这里的reformat是导入的一个js import { reformat } from '../common/reformartDate'reformartDate.js export const reformat = (date) => { let dates = new Date(date) let Y = dates.getFullYear() + '-' let M = (dates.getMonth() + 1 this.form = row //将该行对象数据直接赋给form this.zdydialog = true //自定义对话框展示 },这里我们将新增的对话框进行了复用，因为该对话框连接的是data中的form，所以当row赋值给form时，对 话框展示的时候数据就绑定在了input标签中了。如图所示。 也不会相同。所以我们要使用if来进行判断。 我们在data中新填入一个key submitType : "",当我们使用修改功能的时候对其赋值为‘update’，当使用新增功能时对其赋值为‘add’。代码如下。 add() { this.form = { id: '', name: '', date: '', address: '' } this.submitType = "add"; this.zdydialog = true }, handleEdit(index, row) { // this.form = this.tableData[index] this.submitType = "update"; this.form = row this.zdydialog = true },在对其赋值完毕后我们对submit进行修改，代码如下。 submit() { this.zdydialog = false if(this.submitType == "add"){ this.form.date = reformat(this.form.date); this.tableData.push(this.form) }else{ } },此时我们的新增和修改的功能就已经实现了，如下图。 删除功能相对来说就简单了一些。 在代码中添加删除按钮。 删除handleDelete方法 handleDelete(index, row) { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.tableData.splice(index, 1) this.$message({ type: 'success', message: '删除成功!' }) }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }) }) },对于删除这种操作，最好是提供一个对话框免得操作失误，导致数据删除。 this.tableData.splice(index, 1)splice方法为删除，第一个参数为下标也就是我们传过来得index 第二个参数为删除数量，因为我们只删除 一条所以参数为‘1’ 效果如下图。 当点击确定时。
此时我们得数据就已经从data中删除了。 |
注意这行代码
此时我们需要点击确定按钮，使信息添加至tableData中，代码如下。
此时有一个问题出现。我们的新增和修改在这里共用了同一个submit，但是因为业务不同，固然里面的方法
当点击取消时。 
【本文地址】
今日新闻 |
推荐新闻 |