用vue3＋axios+element-puls写，表格中实现批量删除的代码

好的，以下是使用 Vue3 + axios + Element-Plus 实现表格批量删除的代码示例：

<template>
  <div>
    <el-button type="primary" @click="handleBatchDelete">批量删除</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

export default {
  setup() {
    const state = reactive({
      tableData: []
    })

    // 获取数据
    const loadData = () => {
      axios.get('/api/data').then(res => {
        state.tableData = res.data
      }).catch(error => {
        console.log(error)
      })
    }

    // 批量删除
    const handleBatchDelete = () => {
      const selection = state.selection
      if (selection.length === 0) {
        ElMessage.warning('请至少选择一项进行删除')
        return
      }
      ElMessageBox.confirm('确定要删除选中的数据吗？', '提示', { type: 'warning' }).then(() => {
        // 删除选中的数据
        const ids = selection.map(item => item.id)
        axios.post('/api/delete', { ids }).then(res => {
          state.tableData = state.tableData.filter(item => !selection.includes(item))
          ElMessage.success('删除成功')
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => {})
    }

    loadData()

    return {
      ...toRefs(state),
      handleBatchDelete
    }
  }
}
</script>

在这个例子中，我们使用了 axios 库发送 HTTP 请求，获取数据和删除数据。在组件初始化时，我们调用 `loadData` 函数获取数据并渲染到表格中。在批量删除时，我们首先判断是否选择了数据，然后弹出确认对话框，用户确认后会将选择的数据的 id 发送到后端进行删除。删除成功后，我们再使用响应式 API 更新数据并提示用户删除成功。在这个例子中，我们使用了 Element-Plus 的消息提示组件 `ElMessage` 和确认对话框组件 `ElMessageBox`，提高了用户体验。