vue实现批量删除

最新推荐文章于 2024-04-27 13:27:05 发布

haveryYYY

最新推荐文章于 2024-04-27 13:27:05 发布

阅读量2.7k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_56252450/article/details/121919847

版权

<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>