VUE3的批量删除

一.后台

1.Controller层

/**
 * 批量删除
 */
@DeleteMapping("delAll/{ids}")
public Result delAll(@PathVariable("ids") Integer[] ids){
    shopService.delAll(ids);
    return Result.success();
}

 2.ServiceImpl

@Override
public void delAll(Integer[] ids) {
    shopMapper.delAll(ids);
}

3.Mapper

void delAll(@Param("ids") Integer[] ids);

4.mapper.xml

<delete id="delAll">
    DELETE FROM t_shop WHERE shop_id in
    <foreach collection="ids" item="id" separator="," open="(" close=")">
        #{id}
    </foreach>
</delete>

二.前端

vue3前端：Overview 组件总览 | Element Plus

粘贴到页面上：

代码：

<button @click="delAll()">批量删除</button>
<el-table :data="tableData" style="width: 100%">
  <el-table-column label="" width="180">
    <template #default="scope">
      <div style="display: flex; align-items: center">
        <el-checkbox v-model="ids" :label="scope.row.shopId" size="large" />
      </div>
    </template>
  </el-table-column>

脚本部分：

<script setup>
import axios from "axios";
import {ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
let tableData=ref([])

let ids=ref([])

//批量删除
let delAll=()=>{
  axios.delete('api/goods/shop/delAll/'+ids.value).then(
      res=>{
        if(200==res.data.code){
          ElMessage.success(res.data.msg)
        }
      }

  )
}

</script>

三.效果