ElementUI表格数据批量选中操作

ElementUI表格数据批量选中操作

最近做项目时碰到个需求，要对表格中的数据批量处理，花了点时间最终解决了这个问题

elementui表格中封装了多选框，在el-column中选择type为selection即可
获取选中行的数据需要在table中定义ref使this.$refs.table.selection方法便可获取到选中行的数据
如果要获取不同页的数据进行操作，利用reserve-selection，这在官方文档中有说明

需要注意的是使用reserve-selection属性必须配合row-key（不然会报错）

<el-table-column type="selection" width="55" :reserve-selection="true">

下面是完整代码：

<template>
  <div class="container">
    <el-button type="warning" @click="handle">批量操作</el-button>
    <el-table
      :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"
      style="width: 100%"
      ref="table"
      row-key="id"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column prop="id" label="序号"> </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="tel" label="电话"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next,  jumper"
      :page-size="pagesize"
      :total="list.length"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: [],
      pagesize: 5,
      currpage: 1
    };
  },
  methods: {
    getTableDate() {
      this.$http.post("http://127.0.0.1:8888/user/tableList").then(res => {
        console.log(res.data);
        this.list = res.data;
      });
    },

    //获取到选中行的数据
    handle() {
      console.log(this.$refs.table.selection);
    },

    del(row) {},
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    }
  },
  mounted() {
    this.getTableDate();
  }
};
</script>
<style lang="scss" scoped></style>

一共选中了5条数据

这是打印结果