vue element ui 新增、修改、单个删除、全删

端午刚过完，各位小伙伴玩的开心么，又是学习的时间到了，BiKaBi给你们带来的是表格新增删除和修改，看了很多的博主写的，讲的都不是很清楚和详细，所以自己写了一下，废话不对说，我么你来看代码。。

新增时的演示效果

修改时的演示效果

举个栗子

html部分

  <el-button icon="el-icon-plus" @click="addAll" size="mini" type="success">增加</el-button>
  <el-button type="danger" icon="el-icon-delete" size="mini" @click="delectAll">批量删除</el-button>
  <el-table
    :data="formData.contactInfoList"
    border
    @selection-change="handleSelectionChange"
    style="margin: 10px 0 0 0;"
  >
    <el-table-column type="selection" fixed align="center"></el-table-column>
    <el-table-column label="联系人" align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.show">
          <el-input size="mini" placeholder="请输入内容" v-model="scope.row.contactName"></el-input>
        </span>
        <span v-else>{{scope.row.contactName}}</span>
      </template>
    </el-table-column>
    <el-table-column label="职位" align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.show">
          <el-input size="mini" placeholder="请输入内容" v-model="scope.row.position"></el-input>
        </span>
        <span v-else>{{scope.row.position}}</span>
      </template>
    </el-table-column>
    <el-table-column label="电话" align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.show">
          <el-input size="mini" placeholder="请输入内容" v-model="scope.row.contactPhone"></el-input>
        </span>
        <span v-else>{{scope.row.contactPhone}}</span>
      </template>
    </el-table-column>
    <el-table-column label="QQ" align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.show">
          <el-input size="mini" placeholder="请输入内容" v-model="scope.row.qq"></el-input>
        </span>
        <span v-else>{{scope.row.qq}}</span>
      </template>
    </el-table-column>
    <el-table-column label="备注" align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.show">
          <el-input size="mini" placeholder="请输入内容" v-model="scope.row.remark"></el-input>
        </span>
        <span v-else>{{scope.row.remark}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" align="center" width="200">
      <template slot-scope="scope">
        <el-button
          icon="el-icon-check"
          type="success"
          size="mini"
          @click="edit(scope.row,scope.$index)"
        >{{scope.row.show?'保存':"修改"}}</el-button>
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-delete"
          @click="delect(scope.$index)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>

看完上面的部分，我做一下一些代码的解释方便你更好的理解：:data="formData.contactInfoList"这样写是因为为还有其他的填写表单，所以写在一个表单里提交，如果你是单单想提交这个表可以写成:data="contactInfoList"

methods部分

  edit(row, index) {
     row.show = row.show ? false : true;
     Vue.set(this.formData.contactInfoList, index, row);
     // 修改后保存
   },
   // 单个删除
   delect(index, id) {
     if (this.formData.contactInfoList.id != "") {
       this.customereditdelete(id);
       this.formData.contactInfoList.splice(index, 1);
     } else {
       this.formData.contactInfoList.splice(index, 1);
     }
   },
   //批量新增
   addAll() {
     if (this.multipleSelection.length == 0) {
       let list = {
         contactName: "",
         position: "",
         contactPhone: "",
         qq: "",
         id: "",
         remark: ""
       };
       this.formData.contactInfoList.push(list);
     } else {
       this.multipleSelection.forEach((val, index) => {
         this.formData.contactInfoList.splice(
           index,
           0,
           JSON.parse(JSON.stringify(val))
         );
       });
     }
   },
   //批量删除
   delectAll() {
     for (let i = 1; i < this.formData.contactInfoList.length; i++) {
       const element = this.formData.contactInfoList[i];
       element.id = i;
     }
     if (this.multipleSelection.length == 0)
       this.$message.error("请先至少选择一项");
     this.multipleSelection.forEach(element => {
       this.formData.contactInfoList.forEach((e, i) => {
         if (element.id == e.id) {
           this.formData.contactInfoList.splice(i, 1);
         }
       });
     });
   },
   //选
   handleSelectionChange(val) {
     this.multipleSelection = val;
   },

看到这你应该也明白了是怎么样的去写了，这个只是适用于在新增的时候这样写，这里只是在前端部分做新增、修改、删除，如果是在修改页面中需要显示已存在数据，删除就需要调一下接口删除

拓展栗子

// 这个删除还是表的删除，只是加了个判断
// 单个删除
    delect(index, id) {
      if (this.formData.contactInfoList.id != "") {
        this.customereditdelete(id);
        this.formData.contactInfoList.splice(index, 1);
      } else {
        this.formData.contactInfoList.splice(index, 1);
      }
    },
// 这个删除是调用接口的删除，在上面触发  this.customereditdelete(id);
// 单个删除
    async customereditdelete(id) {
      try {
        const res = await this.$postRequest.deletes(
          `${this.$apiUrl.customereditdelete}/${id}`
        );
        if (res.code === 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error(msg);
        }
      } catch (e) {}
    },

我现在只拿单独删除来举例，全删也是一样的，记住一点就是别忘记传id