前端实现el-table的数据修改和删除，将处理后的数据传给后台

<!--
 * @Descripttion: this.$set的正确使用
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-05-18 14:05:13
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-04-25 17:47:12
-->

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column align="left" label="操作" width="250px" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-link type="primary" @click="editName(scope.row.id)"
              >修改姓名</el-link
            >
            <el-link type="danger" @click="handleDelete(scope.$index)"
              >删除</el-link
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--修改QPS-->
    <el-dialog
      title="修改姓名"
      :visible.sync="visible"
      :close-on-click-modal="false"
      @close="handleClose"
      custom-class="dialog-minwidth"
      width="500px"
      :modal-append-to-body="false"
    >
      <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleClose" class="cancel">取消</el-button>
        <el-button type="primary" @click.native="toSave" class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
      },
      visible: false,
      userId: "",
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "4",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    /**
     * @description: 修改表格姓名
     */
    editName(userId) {
      this.visible = true;
      this.userId = userId;
    },
    /**
     * @description: 删除表格数据
     */
    handleDelete(index) {
      this.$confirm("确认删除吗?", "提示", {
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch(() => {});
    },
    /**
     * @description: 关闭弹框
     */
    handleClose() {
      this.visible = false;
    },
    /**
     * @description: 保存修改
     */
    toSave() {
      let obj = {};
      let index = "";
      this.tableData.forEach((item, i) => {
        if (item.id == this.userId) {
          index = i;
          item.name = this.ruleForm.name;
          obj = item;
        }
      });
      this.$set(this.tableData, index, obj);
      this.$message({
        type: "success",
        message: "修改成功!",
      });
      this.visible = false;
      console.log(this.tableData)
    },
  },
};
</script>

<style  scoped lang="less">
</style>