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

  • Post author:
  • Post category:其他




需求

在这里插入图片描述

全选列👇

<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



版权声明:本文为t_t2_3原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。