element实现table的批量删除行功能

<template>
  <div class="oDiv">
    <div style="margin-top: 20px">
      <el-button @click="delArray()" type="danger">批量删除</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <el-table
      :data="tableData"
      ref="multipleTable"
      style="width: 100%"
      max-height="250"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        prop="date"
        label="日期"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-ta
  • 7
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
使用Element UI表格进批量删除,您需要遵循以下步骤: 1. 在您的Vue.js组件中导入Element UI表格组件和相关依赖。 ``` import { Table, Button, MessageBox } from 'element-ui'; import axios from 'axios'; ``` 2. 在您的模板中创建一个Element UI表格,并为其设置columns和data属性。 ``` <template> <div> <el-button type="danger" @click="deleteSelectedRows">删除选中</el-button> <el-table :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [] }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; }, deleteSelectedRows() { MessageBox.confirm('确定删除选中吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { const ids = this.selectedRows.map(row => row.id); axios.delete(`/api/users/${ids.join(',')}`).then(() => { this.$message.success('删除成功'); this.tableData = this.tableData.filter(row => !ids.includes(row.id)); this.selectedRows = []; }); }).catch(() => { this.$message.info('已取消删除'); }); } } }; </script> ``` 3. 在您的Vue.js组件中编写删除方法,该方法将删除所选并从表格中移除它们。 在删除方法中,您需要使用MessageBox确认对话框来提示用户是否要删除所选。如果用户确认删除,则使用Axios库向服务器发送删除请求。一旦删除请求成功,您需要从表格数据中过滤掉已删除,并清空所选数组。 上面的代码示例假设您的数据来自名为`/api/users`的REST API,并且每个用户对象都有一个名为`id`的属性。如果您的数据源不同,请相应地更改代码。 希望这可以帮助您了解如何使用Element UI表格进批量删除

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值