Vue + Element UI 实现对表格的增加，删除以及修改功能（附代码+整体思路） --柚子真好吃

该文章在表格成功展示的基础上进行维护，包含整体设计思路适用于新人上手。

表格构建请参考我的上一篇文章：Vue 使用 ElementUI 构建表格 点击跳转

文章源码参考：https://github.com/Recklesslmz/elementUI

一、表格代码准备

1. 首先在template中定义表格，代码如下

<div class="tableMain">
     <el-table :data="tableData" style="width: 100%">
       <el-table-column prop="id" label="ID" width="180">
       </el-table-column>
       <el-table-column prop="name" label="用户名" width="180">
       </el-table-column>
       <el-table-column prop="date" label="日期" width="180">
       </el-table-column>
       <el-table-column prop="address" label="地址" width="180">
       </el-table-column>
     </el-table>
 </div>

2. 数据绑定
   在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: '狗窝',
      },],
    }
  }

3. 表格展示，如下图。
   

二、增加功能

1. 编写增加按钮

 <div class="addArea">
      <el-button class="add_btn" type="primary" @click="add">新增</el-button>
 </div>

从这开始我们来细细的一步一步走，争取不出错。（只能是争取）

当我们点击新增的时候需要弹出一个对话框，其中可以让我们填写各种信息，然后确定，这样才能够将数据添加。故需要编写一个dialog来存放这些东西。

2. 编写自定义dialog，目的是点击按钮展示该对话框，代码如下。

<el-dialog style="width: 1000px;height: 1000px;" title="用户信息" :visible.sync="zdydialog">
      <el-form :model="form">
        <el-form-item label="编号" width="80px">
          <el-input class="dialog_input" v-model="form.id" ></el-input>
        </el-form-item>
        <el-form-item label="姓名" width="80px">
          <el-input class="dialog_input" v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="日期" width="80px">
          <el-date-picker  v-model="form.date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" width="80px">
          <el-select class="dialog_input" v-model="form.address" placeholder="选择地址">
            <el-option label="猫窝" value="猫窝"></el-option>
            <el-option label="狗窝" value="狗窝"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

界面图如下

注意这行代码

	:visible.sync="zdydialog"

此代码的作用为控制该dialog的展示与隐藏，所以我们需要在data中添加‘zdydialog’

data() {
    return {
      zdydialog: false,
      form : {},
    }
  }

设置为false的目的是 当页面加载时，对话框不展示，当用户点击‘新增’按钮时，弹出对话框。

form的作用下面会讲。

3. add方法编写

 methods: {
    add() {
    this.form = {
        id: '',
        name: '',
        date: '',
        address: ''
      }
      this.zdydialog = true
    }
 }

这里需要做一下解释，为什么要将form中全部的key对应的value设置为空。

原因是我们的form表单连接的是data中的form，当我们单击新增按钮时，需要将展示框中的input标签里的内

容清空，供用户添加信息。（注：input标签中的v-model中的属性名要跟data中的相对应）

4. submit提交方法

当用户输入完要添加的信息后，如下图。

此时我们需要点击确定按钮，使信息添加至tableData中，代码如下。

	submit() {
      this.form.date = reformat(this.form.date); //日期类型转换
      this.tableData.push(this.form) //向tableData中添加数据
      this.zdydialog = false	//自定义对话框隐藏
    }

如果不进行日期转换，我们来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 < 10 ? '0' + (dates.getMonth() + 1) : dates.getMonth() + 1) + '-'
  let D = dates.getDate() < 10 ? '0' + dates.getDate() + ' ' : dates.getDate() + ' '
  const currentDate = Y + M + D
  return currentDate
}

总结：以上操作就是将form中用户输入的数据，添加至tableData总数据中，从而实现添加的功能。

三、修改功能

1. 在el-table中添加修改按钮，如下。

	 <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
          </template>
     </el-table-column>

我们可以看一下hadnleEdit中的2个参数

handleEdit(index, row) {
      console.log(index)
      console.log(row)
    },

效果如下

不难看出这2个参数 为 下标和对象，这样我们就可以编写修改功能的代码。

handleEdit(index, row) {
      this.form = row     //将该行对象数据直接赋给form
      this.zdydialog = true //自定义对话框展示
    },

这里我们将新增的对话框进行了复用，因为该对话框连接的是data中的form，所以当row赋值给form时，对

话框展示的时候数据就绑定在了input标签中了。如图所示。

此时有一个问题出现。我们的新增和修改在这里共用了同一个submit，但是因为业务不同，固然里面的方法

也不会相同。所以我们要使用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{

      }

    },

此时我们的新增和修改的功能就已经实现了，如下图。

四、删除功能

删除功能相对来说就简单了一些。

在代码中添加删除按钮。

	 <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
     </el-button>

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中删除了。

五、源代码

<template>
  <div class="tableAll">
    <div class="addArea">
      <el-button class="add_btn" type="primary" @click="add">新增</el-button>
    </div>

    <div class="tableMain">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <el-dialog style="width: 1000px;height: 1000px;" title="用户信息" :visible.sync="zdydialog">
      <el-form :model="form">
        <el-form-item label="编号" width="80px">
          <el-input class="dialog_input" v-model="form.id" ></el-input>
        </el-form-item>
        <el-form-item label="姓名" width="80px">
          <el-input class="dialog_input" v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="日期" width="80px">
          <el-date-picker  v-model="form.date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" width="80px">
          <el-select class="dialog_input" v-model="form.address" placeholder="选择地址">
            <el-option label="猫窝" value="猫窝"></el-option>
            <el-option label="狗窝" value="狗窝"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import { reformat } from '../common/reformartDate'

export default {
  name:"eltable",
  data() {
    return {
      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: '狗窝',
      },],
      zdydialog: false,

      formLabelWidth: '80px',
      form: {},
      submitType : "",
    }
  },
  methods: {
    add() {
      this.form = {
        id: '',
        name: '',
        date: '',
        address: ''
      }
      this.submitType = "add";
      this.zdydialog = true
    },
    submit() {
      //alert(this.form.date)
      // var ss = reformat(this.form.date)
      // alert(ss)
      this.zdydialog = false

      if(this.submitType == "add"){
        this.form.date = reformat(this.form.date);
        this.tableData.push(this.form)
      }else{

      }

    },
    handleEdit(index, row) {
      // this.form = this.tableData[index]
      this.submitType = "update";
      this.form = row
      this.zdydialog = true
    },
    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: '已取消删除'
        })
      })
    },
    cancel() {
      this.zdydialog = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  },
}
</script>


<style>
.tableAll{
  width:900px;
  height: 300px;
  /* border: red 1px solid; */
}
.addArea{
  height: 40px;
  width: 900px;
  /* border: red 1px solid; */
}
.add_btn{
  float: right;
  margin-right: 20px;
}
.dialog_input{
  width:220px;
}

</style>