vue+element 表格 删除 批量删除

2023年2月17日 151次阅读 来源: 北乎下周

效果图

以作物表为例

《vue+element 表格 删除 批量删除》

 这里有【批量删除】和【删除】

表单里的批量删除

 <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button
          v-if="isAuth('pesticide:crop:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
          >批量删除</el-button
        >
      </el-form-item>

表格里的单项删除

 <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="isAuth('pesticide:crop:delete')"
            type="text"
            size="small"
            @click="deleteHandle(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>

二者对比

《vue+element 表格 删除 批量删除》

 

删除的方法

// 删除
    deleteHandle (id) {
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm('确定对所选项进行[删除]操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: '/pesticide/crop/delete',
          method: 'post',
          data: ids
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
            this.getDataList()
          }
        })
      }).catch(() => {
      })
    }

而在农药表中

 deleteHandle () {
      // if (rows) {
      //   rows.forEach((row) => {
      //     this.$refs.multipleTable.toggleRowSelection(row);
      //   });
      // } else {
      //   this.$refs.multipleTable.clearSelection();
      // }
      //首先获取到对象（要删除的对象）
      //在获取到整个table里面的数据
      //判断是否相等 是的话就删除

      let finalData = JSON.parse(JSON.stringify(this.dataForm.details));
      let delIds = [];
      this.dataListSelections.forEach((item) => {
        this.dataForm.details.forEach((tableDataItem, i) => {
          // console.log(item == tableDataItem);
          if (item == tableDataItem) {
            // delete finalData[i];
            delIds.push(i);
          }
        });
      });
      function sortNumber (a, b) {
        //升序
        return a - b;
      }
      delIds.sort(sortNumber);
      let delNum = 0;
      for (let i = 0; i < delIds.length; i++) {
        finalData.splice(delIds[i] - delNum, 1);
        delNum++;

      }

      // delIds.forEach((item) => {

      // i = i - 1;
      // });
      this.dataForm.details = finalData;
    },

啊

    原文作者：北乎下周
    原文地址: https://blog.csdn.net/weixin_49393290/article/details/121125220
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞