js删除el-table删除新增项,有的已经保存有的未经保存

27 篇文章 0 订阅

有时候在弹窗中的弹窗要删除数据,有的是刚新增进来的,没有经过保存就没有id,有的已经保存过就有id
在这里插入图片描述
根据情况设定是否为编辑模式,如果为编辑模式就需要进行筛选删除及接口,如果不是编辑模式,只需要进行筛选删除

  this.editFlag = true; // 为编辑模式
   // 删除伤亡名单
    handelDel() {
      let that = this;
      if (!that.selectRow.length) {
        this.$message.error("请选择要删除的数据");
        return;
      }
      that
        .$confirm("是否确认删除?", "确认信息", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          if (this.editFlag) {
            this.tableDel();
          } else {
            const result = this.tableData.filter((itemA) => {
              return !this.selectRow.some((itemB) => itemA.id === itemB.id); // some 判断是否存在相同 projectName 的对象
            });
            this.tableData = result;
          }
        })
        .catch(() => {
          that.$message.info("已取消删除");
        });
    },
    tableDel() {
      let arr1 = this.selectRow.filter((val) => !val.accidentUserId);
      if (arr1.length > 0) {
        const result = this.tableData.filter((itemA) => {
          return !this.selectRow.some((itemB) => itemA.id === itemB.id); // some 判断是否存在相同 projectName 的对象
        });
        this.tableData = result;
      }
      let arr = this.selectRow.filter((val) => val.accidentUserId);

      if (arr.length > 0) {
        let accidentRecordIds = this.selectRow.map(
          (item) => item.accidentUserId
        );
        delUser(accidentRecordIds)
          .then((res) => {
            const { code, data, msg } = res.data;
            if (code == 0) {
              this.$message.success(msg || "删除成功");
              this.getTableData();
              this.innerDrawer = false;
            } else {
              this.$message.error(msg || "删除失败,请稍后重试");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 Element UI 的 `el-table` 的 `append` 方法来动态添加一行。然后,当你需要保存新增的行时,你可以调用 API 接口来将数据保存到服务器上。 以下是一个简单的示例代码: ```html <el-table :data="tableData" ref="table"> <!-- 表格列定义 --> </el-table> <el-button @click="addRow">添加一行</el-button> <el-button @click="saveRows">保存行</el-button> ``` ```js export default { data() { return { tableData: [] } }, methods: { addRow() { this.tableData.push({}); this.$nextTick(() => { const len = this.tableData.length; this.$refs.table.setCurrentRow(this.tableData[len - 1]); }); }, saveRows() { const newData = this.tableData.filter(item => item.id === undefined); // 过滤出新增的数据 // 调用 API 接口保存数据,示例代码如下 this.$http.post('/api/save', newData).then(res => { // 保存成功后,更新表格数据 this.tableData = this.tableData.filter(item => item.id !== undefined); this.tableData.forEach(item => { item.dirty = false; }); this.$message.success('保存成功'); }).catch(err => { this.$message.error('保存失败'); }); } } } ``` 在上面的示例代码中,我们使用 `addRow` 方法来动态添加一行,并将新添加的行设置为当前行,以便用户可以立即编辑它。然后,我们使用 `saveRows` 方法来保存新增的行。我们首先使用 `filter` 方法过滤出所有还没有提交到服务器的新增数据,然后调用 API 接口将数据保存到服务器上。保存成功后,我们更新表格数据,将所有已经提交到服务器上的数据从表格中移除,并将 `dirty` 字段设置为 `false`,以便用户知道哪些数据已经保存过了。最后,我们使用 `$message` 组件来显示保存成功或失败的提示信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值