调用接口实现Table增删改

<el-form :inline="true" style="float: right">
        
          <el-button type="success" size="small" icon="el-
icon-edit" @click="addExcel(0)" >新增进程信息
        el-form-item>
        
          <el-button type="danger" size="small" icon="el-
icon-delete" @click="deleteExcel">批量删除进程信息
        el-form-item>
      el-form>

<el-table :data="processDate" border v-loading="processDateLoading" style="width:100%"  @selection-change="selectChange">
      <el-table-column type="selection" width="55" align="center">el-table-column>
      <el-table-column prop="id" label="ID" align="center" >el-table-column>
      <el-table-column prop="name" label="名称" align="center" >el-table-column>
      <el-table-column prop="extract" label="EXTRACT" align="center">el-table-column>
      <el-table-column prop="pump" label="PUMP" align="center"> el-table-column>
      <el-table-column prop="ip" label="IP" align="center" > el-table-column>
      <el-table-column label="操作" align="center" min-width="60">
        
      el-table-column>
    el-table>

<el-dialog :title="editTitle == 0 ? 新增进程信息 : 编辑进程信息" :visible.sync="addDialogFormVisible"
      :destroy-on-close="true"  append-to-body>
      <el-form :model="addForm" status-icon :rules="rule" ref="addForm" :inline="true" label-width="120px" >
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" style="width: 220px">el-input>
        el-form-item>
        <el-form-item label="ECTRACT" prop="extract">
          <el-input v-model="addForm.extract" style="width: 220px" >el-input>
        el-form-item>
        <el-form-item label="PUMP" prop="pump">
          <el-input v-model="addForm.pump" style="width: 220px" >el-input>
        el-form-item>
        <el-form-item label="IP" prop="ip">
          <el-input v-model="addForm.ip" style="width: 220px">el-input>
        el-form-item>
      el-form>
      
"footer" class="dialog-footer">
        <el-button size="small" @click="addDialogFormVisible = false" >取 消el-button >
        <el-button size="small" type="primary" @click="editFormInfo">确 定el-button >
      

    el-dialog>

rule: {
        name: [{ required: true, message: "请填写名称", trigger: "bulr" },],
        extract: [{ required: true, message: "请填写ECTRACT", trigger: "bulr" },],
        pump: [{ required: true, message: "请填写PUMP", trigger: "bulr" },],
        ip: [{ required: true, message: "请填写IP", trigger: "bulr" },],
      },

addExcel(edit) {
      this.editTitle = edit; //此时进程标题为0
      this.addDialogFormVisible = true; //新增进程弹窗可见
    },

editFormConfim(edit, row) {
      this.addDialogFormVisible = true;//修改进程弹窗可见
      this.editTitle = edit; //此时进程标题为1
      this.addForm.id = row.id; //把列表信息带入修改页面中
      this.addForm.name = row.name;
      this.addForm.extract = row.extract;
      this.addForm.pump = row.pump;
      this.addForm.ip = row.ip;
    },

editFormInfo() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          if (this.editTitle == 0) {//editTitle 为0是为新增
            this.$fetch("POST", "/oggRoute/add", //请求方法 地址 参数
              params).then((response) => {
              if (response.msgCode == 200) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success",
                });
                this.addDialogFormVisible = false; //执行成功后关闭弹窗
                this.selectExcel(); //查询信息列表接口
              } else {
                this.$message.error("添加失败：" + response.message);
              } });
          } else {//editTitle 为1是为编辑
            this.$fetch("POST", "/oggRoute/update", params
            ).then((response) => {
              if (response.msgCode == 200) {
                this.$message({
                  showClose: true,
                  message: "修改成功",
                  type: "success",
                });
                this.addDialogFormVisible = false;
                this.selectExcel();//查询信息列表接口
              } else {
                this.$message.error("修改失败：" + response.message);
              } }); } } });},

selectChange(ids) {//多选进程信息id数组
      this.selectIds = ids.map((row) => row.id);
    },

deleteExcel() {
      if (this.selectIds.length === 0) {
        this.$message.warning("未选择数据");
        return;
      }
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$fetch("POST", "/oggRoute/delete", params
          ).then((res) => {
            if (res.msgCode === 200 && res.data.result) {
              this.$message.success("删除成功");
              this.selectExcel();
            } }); })
        .catch(() => {});
    },

handleDelete(row) {
      let deleteId = [];
      deleteId.push(row);
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }) .then(() => {
          this.$fetch("POST", "/oggRoute/delete",
            params).then((res) => {
            if (res.msgCode === 200 && res.data.result) {
              this.$message.success("删除成功");
              this.selectExcel();
            } }); })
        .catch(() => {});
    },