Vue Element Table 多选数据批量调用接口完整示例

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" ref="table">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-button type="primary" @click="handleSelection">Submit</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 18, address: 'New York' },
        { name: 'Jane', age: 22, address: 'London' },
        { name: 'Bob', age: 30, address: 'Paris' },
        { name: 'Alice', age: 25, address: 'Tokyo' }
      ],
      selectedRows: [] // 用于存储选中的行数据
    };
  },
  methods: {
    handleSelection() {
      this.selectedRows = this.$refs.table.selection; // 获取选中的行数据
      this.selectedRows.forEach(row => {
        // 调用接口处理每条数据
        // ...
      });
    }
  }
};
</script>