elementUI el-table-column添加一键全选

"这篇博客介绍了如何在Vue项目中利用Element UI的表格组件实现全选功能。通过``配置全选列,并通过`@selection-change`监听选中状态变化。在`handleSelectionChange`方法中,可以获取到选中的行数据并存储到数组`delete`中,为后续的数据删除操作做准备。"
摘要由CSDN通过智能技术生成

需求

在这里插入图片描述
全选列👇

<el-table-column label="全选" width="50" type="selection">
</el-table-column>

整个表格👇

<el-table :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column label="全选" width="50" type="selection">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="50"> </el-table-column>
      <el-table-column prop="birth" label="生日" width=""> </el-table-column>
      <el-table-column prop="school.name" label="学校名字" width="">
      </el-table-column>
      <el-table-column prop="school.info" label="学校地址" width="">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看选课</el-button
          >
        </template>
      </el-table-column>
    </el-table>

第一列就是了

拿值

需求也说了怎么才能拿到选中的东西呢

  handleSelectionChange(v){
  //这个v就是这一行 v是个数组里面放着你选中的一个一个对象
    this.delete =v  //存到数组,等着发request
    }

选中一个给大家看看
在这里插入图片描述
行了拿到delete这个数组发给后端 数据库直接delete from student where XX

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

商朝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值