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

好的，以下是使用 Vue3 + 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'

export default {
  setup() {
    const state = reactive({
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 }
      ]
    })

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

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

在这个例子中，我们使用了 Element-Plus 的 `ElTable` 组件和 `ElButton` 组件。`ElTable` 组件中的 `type="selection"` 属性表示开启选择模式，这样就可以在表格左侧显示多选框，方便进行批量删除操作。点击批量删除按钮时，会弹出确认对话框，用户确认后会删除选择的数据。在删除数据时，我们使用了 Vue3 的响应式 API `reactive` 和 `toRefs`，这样可以自动更新视图。同时，我们也使用了 Element-Plus 的消息提示组件 `ElMessage` 和确认对话框组件 `ElMessageBox`，提高了用户体验。