Java实现多选批量删除功能（vue+Element）

选择前效果图

选中效果图

前端vue代码

1. 页面显示template
   使用方法 @selection-change=“changeFun” 获取表中选中的行所有显示的数据

<template>
  <div class="dept tab-container">
    <div class="dept-table">
      <div id="query" class="newTable">
        <!-- 列表数据展示-->
        <el-table
          :data="list"
          border
          fit
          style="width: 100%;"
          v-loading="loading"
          element-loading-text="请给我点时间！"
          @selection-change="changeFun"
        >
          <el-table-column type="selection" width="55" v-model="checkBoxData"></el-table-column>
          <el-table-column align="center" label="姓名" min-width="60px">
            <template slot-scope="scope">
              <span>{
  {scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="记录类型" min-width="80px">
            <template slot-scope="scope">
              <span>{
  {getTypeName(scope.row.type)}}</span>