【批量删除】Vue3.2 后台管理系统实现批量删除的功能

一、页面表格布局

<el-table ref="multipleTableRef" :data="tableData" border style="width: 100%"
              @selection-change="handleSelectionChange" @current-change="CurrentChange"
              :header-cell-style="{ background: '#23cdab', color: '#606266' }">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="name" label="活动名称" />
              <el-table-column prop="type" label="活动类型" />
              <el-table-column prop="belong" label="活动所属社团" />
              <el-table-column prop="number" label="活动人数" />
              <el-table-column prop="credit" label="活动学分" />
              <el-table-column prop="list" label="人员名单" />
              <el-table-column prop="operate" label="操作" width="300">
                <template #default="scope">
                  <el-button color="#23cdab" :icon="Edit" class="editBtn" @click="editBtn">{{ scope.row.operate.edit
                  }}</el-button>
                  <el-button type="danger" :icon="Delete" class="delBtn" @click="delBtn">{{ scope.row.operate.del
                  }}</el-button>
                  <el-button type="primary" :icon="Setting" class="showBtn" @click="showBtn">{{ scope.row.operate.show
                  }}</el-button>
                </template>
              </el-table-column>
 </el-table>

二、批量删除按钮

未选择的时候按钮置灰

<el-button type="danger" :icon="Delete" @click="batchDeletion()"
                :disabled="batchDel.length === 0">批量删除</el-button>

三、功能模块逻辑

<script setup >
//表格数据
const tableData = ref([
  {
    id: 1,
    name: '11社团',
    type: 'IT学习',
    belong: '计算机学院',
    number: '200',
    credit: '3',
    list: '安卓开发',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 2,
    name: '大数据社团',
    type: 'IT学习',
    belong: '计算机学院',
    number: '50',
    credit: '3',
    list: '互联网',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 3,
    name: '羽毛球社团',
    type: '运动',
    belong: '旅游学院',
    number: '99',
    credit: '2',
    list: '软件开发',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 4,
    name: '排球社团',
    type: '运动',
    belong: '机电学院',
    number: '20',
    credit: '2',
    list: '空乘',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 5,
    name: '篮球社团',
    type: '运动',
    belong: '机电学院',
    number: '50',
    credit: '2',
    list: '互联网',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 6,
    name: '未来社团',
    type: '运动',
    belong: '电信学院',
    number: '50',
    credit: '2',
    list: '软件开发',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 7,
    name: '羽毛球社团',
    type: '运动',
    belong: '旅游学院',
    number: '99',
    credit: '2',
    list: '软件开发',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 8,
    name: '排球社团',
    type: '运动',
    belong: '机电学院',
    number: '20',
    credit: '2',
    list: '空乘',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 9,
    name: '篮球社团',
    type: '运动',
    belong: '机电学院',
    number: '50',
    credit: '2',
    list: '互联网',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
  {
    id: 10,
    name: '未来社团',
    type: '运动',
    belong: '电信学院',
    number: '50',
    credit: '2',
    list: '软件开发',
    operate: { edit: '编辑', del: '删除', show: '查看' },
  },
])
const batchDel = ref([])
//指向DOM元素
const multipleTableRef = ref('')
//获取当前选中的数据给到数据
const handleSelectionChange = (val) => {
  batchDel.value = []
  val.forEach(item => {
    batchDel.value.push(item.id)
  });

}
const delBtn = (id) => {
  ElMessageBox.confirm('此操作将永久删除数据, 是否继续?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      const index = tableData.value.findIndex((item) => item.id === id)
      tableData.value.splice(index, 1)
      ElMessage({ type: 'success', message: '删除成功' })
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '取消删除' })
    })
}
//批量删除
const batchDeletion = () => {
  ElMessageBox.confirm("此操作将永久删除数据, 是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    batchDel.value.forEach(id => {
      const index = tableData.value.findIndex((item) => item.id === id)
      tableData.value.splice(index, 1)
    })
    batchDel.value = []
    ElMessage({ type: 'success', message: '删除成功', })
    multipleTableRef.value.clearSelection();
  }).catch(() => {
    ElMessage({ type: 'info', message: '取消删除', })
  });
};
<script>

四、效果展示