js el-table 批量删除

可以使用以下代码实现批量删除：

// 获取选中的行
const selection = this.$refs.table.selection;

// 获取选中行的 id
const ids = selection.map(item => item.id);

// 发送删除请求
this.$http.delete('/api/delete', { data: { ids }})
  .then(() => {
    // 删除成功后，重新加载数据
    this.loadData();
  })
  .catch(error => {
    console.error(error);
  });

其中，`this.$refs.table` 是 `el-table` 组件的引用，`selection` 属性表示当前选中的行。

相关问题

点击el-button实现el-table-colum批量删除

你可以在el-table的模板中添加一个名为`handleBatchDelete`的方法，并在el-table-column中添加一个名为`batch-delete`的el-button。然后，在`handleBatchDelete`方法中，获取选中的行并将其删除。以下是一个示例代码：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <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>
    <template slot="header">
      <el-button type="danger" v-if="multipleSelection.length > 0" @click="handleBatchDelete">Batch Delete</el-button>
    </template>
    <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(row)">Delete</el-button>
  </el-table-column>
</el-table>

data() {
  return {
    tableData: [
      { id: 1, name: 'John', age: 18 },
      { id: 2, name: 'Mary', age: 20 },
      { id: 3, name: 'Tom', age: 22 }
    ],
    multipleSelection: []
  }
},
methods: {
  handleSelectionChange(val) {
    this.multipleSelection = val
  },
  handleBatchDelete() {
    this.multipleSelection.forEach(item => {
      const index = this.tableData.indexOf(item)
      this.tableData.splice(index, 1)
    })
    this.multipleSelection = []
  },
  handleDelete(row) {
    const index = this.tableData.indexOf(row)
    this.tableData.splice(index, 1)
  }
}

在上面的代码中，我们在el-table-column中添加了一个名为`batch-delete`的el-button，并在其头部添加了一个名为`handleBatchDelete`的方法。该方法会获取选中的行并将其删除。当选中的行数大于0时，该el-button才会显示。同时，在el-table中的`@selection-change`事件中，我们将选中的行存储在`multipleSelection`数组中，在删除时，我们遍历该数组并根据其元素从tableData中删除相应的行。最后，我们将`multipleSelection`数组置为空数组。

el-table写一个批量删除功能

好的，下面是一个简单的示例代码（假设你已经有了一个el-table，并且数据使用v-for循环渲染）：

<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
<el-table :data="tableData">
  <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-column prop="address" label="地址"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

在上面的代码中，我们添加了一个“批量删除”按钮，它通过调用handleBatchDelete方法来执行批量删除操作。

接下来，我们需要在Vue实例中实现handleBatchDelete方法：

methods: {
  handleBatchDelete() {
    const selectedRows = this.$refs.table.selection; // 获取选中行的数据
    const ids = selectedRows.map(row => row.id); // 获取选中行的id集合
    this.$confirm(`确认删除以下${ids.length}条记录？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 发送批量删除请求
      this.$http.post('/api/delete', { ids }).then(() => {
        this.$message.success('删除成功');
        // 重新加载数据
        this.loadData();
      }).catch(() => {
        this.$message.error('删除失败');
      })
    }).catch(() => {
      // 取消删除
    })
  },
  handleDelete(index) {
    const row = this.tableData[index];
    this.$confirm(`确认删除${row.name}？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 发送删除请求
      this.$http.post('/api/delete', { id: row.id }).then(() => {
        this.$message.success('删除成功');
        // 重新加载数据
        this.loadData();
      }).catch(() => {
        this.$message.error('删除失败');
      })
    }).catch(() => {
      // 取消删除
    })
  }
}

在上面的代码中，我们使用了element-ui组件库提供的confirm对话框来提示用户是否进行删除操作。在用户点击“确定”按钮后，我们通过选中行的数据来获取需要删除的id集合，然后发送批量删除的请求。在请求成功后，我们重新加载数据，以更新表格的显示。

注意，上面的代码中，我们还提供了一个handleDelete方法，用于删除单个记录。这里只是为了方便说明批量删除的实现方式，实际应用中，我们可以只保留批量删除的代码即可。