Vue——vue3+element plus实现多选表格使用ajax发送id数组

在Vue 3和Element Plus中实现多选表格，并使用Ajax发送选中行的ID数组，可以通过以下步骤实现：

1. 使用el-table组件来展示数据，并使用el-table-column的type="selection"来创建多选列。
2. 使用ref属性来引用表格实例，并监听多选事件。
3. 使用Ajax（例如使用axios）发送HTTP请求，将选中行的ID数组发送到服务器。

以下是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    style="width: 100%"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="date" label="日期" width="120"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="sendIdsToServer">发送选中ID</el-button>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import axios from 'axios';
 
const tableData = ref([
  // 初始数据
  {
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  // ...更多数据
]);
 
const multipleSelection = ref([]);
 
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
 
const sendIdsToServer = () => {
  const ids = multipleSelection.value.map(item => item.id);
  axios.post('/your-api-endpoint', { ids })
    .then(response => {
      // 处理响应
      ElMessageBox.alert('IDs已发送成功', '成功');
    })
    .catch(error => {
      // 处理错误
      ElMessageBox.alert('发送IDs失败', '错误', { type: 'error' });
    });
};
</script>

在这个示例中，我们定义了一个表格并为其添加了多选列。当选中项变化时，我们通过handleSelectionChange来更新所选行的数据。sendIdsToServer函数负责收集所有选中行的ID，并通过Ajax发送到服务器。

请确保安装了element-plus和axios依赖，并正确配置了API端点。