vue实现批量删除

<template>
<el-button size="medium" @click="Tips">删除</el-button>
      <el-dialog title="删除提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>确认删除信息?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="toggleSelection">取 消</el-button>
          <el-button type="primary" @click="Delete()">确 定</el-button>
        </span>
      </el-dialog>
</template>
<script>
  import BaseApi from "@/api/index"
  import commonImages from "@/static/js/commonMedium.js";
  import axios from "axios";
  import qs from 'qs';
  methods:{
     Tips() {
        this.deleteForm = this.multipleSelection;
        if (this.deleteForm.length == 0) {
          this.$message.error('请选择要删除的数据');
        } else {
          this.dialogVisible = true;
        }

       },
      handleClose(done) {
        this.$confirm('确认关闭?')
          .then(_ => {
            done();
          })
          .catch(_ => { });
        // this.toggleSelection();
      },
       toggleSelection() {
        this.dialogVisible = false;
        if (this.deleteForm) {
          this.$nextTick(() => {
            this.deleteForm.forEach(row => {
              console.log(row);
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          })
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //删除
      Delete() {
        const _this = this;
        this.dialogVisible = false;
        if (this.deleteForm.length == 0) {
          this.$message.error('请选择要删除的数据');
        }
        else {
          //this.dialogVisible=true;
          axios.post('/havery/demo/deleteByID', this.deleteForm, { indices: false,                   headers: { 'Content-Type': 'application/json' } }).then(result => {
            if (result.data) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.onSubmit(this.formInline.co_name);
            }
            else {
              this.$message.error('删除失败');
              return false;
            }
          })
        }
      },
      //选中的项
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
   },
   data:{
     return:{
        dialogVisible: false,
        deleteForm: [],//删除的项
        multipleSelection: [],//复选框
     }
  }
</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值