elementui table表格跨分页多选

雨溪不会vue

已于 2022-06-02 18:17:52 修改

阅读量4.9k

点赞数 6

CC 4.0 BY-SA版权

于 2022-01-17 17:37:32 首次发布

本文链接：https://blog.csdn.net/qq_46266925/article/details/122543233

本文介绍如何使用ElementUI的表格组件实现跨页多选功能，并利用row-key和reserve-selection属性简化代码，同时保持选中状态不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui table表格跨分页多选

项目中遇到的表格多选加分页，要获取选中的数据，使用elementui的表格开发,刚开始思路是：
1.创建一个数组，使它每项为一页所选择的选择项数据数组。选择项改变时，去更新对应项的数组。
2.切换页码后，等数据加载完，查找selectionArr中当前页有无被选中的选择项数据。如果有，将数据勾选上。

完整代码如下：

<template>
  <div>
    <el-table
      :data="tableDate"
      ref="table"
      @select="handleSelectionChange"
      @select-all="handleSelectionChange"
    >
    
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="name" label="名称" ></el-table-column>
      
    </el-table>
    
    <el-pagination
      @size-change="handleChangePagination"
      @current-change="handleChangePagination"
      :current-page.sync="paginationData.page"
      :page-sizes="[2, 5, 10, 20, 50]"
      :page-size="paginationData.page_size"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>

export default {
  data() {
    return {
    tableDate:[],
    total:0,
      paginationData: {
        page: 1,
        page_size: 2,
      },
      arrSelection: [],
    };
  },


  methods: {
    handleSelectionChange(selection) {
      this.arrSelection[this.paginationData.page - 1] = selection;
    },
    SaveTheSelectionResult() {
      if (this.arrSelection[this.paginationData.page - 1]) {
        this.arrSelection[this.paginationData.page - 1].forEach((value) => {
          this.tableDate.forEach((val, index) => {
            if (value.id === val.id) {
              this.$refs.table.toggleRowSelection(this.tableDate[index], true);
            }
          });
        });
       
      }
    },
	handleChangePagination() {
	      this.$http.get('你自己的网址').then((response)=>{
	          this.tableDate = response.data.tableDate;
	          this.total = response.data.total;
	          this.SaveTheSelectionResult()
	    })
	    },
  },
  mounted() {
	this.handleChangePagination() 
  },
};
</script>

但是通过阅读elementui的表格文档时，发现了两个属性row-key和reserve-selection，两个属性的作用如下：

row-key:行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
reserve-selection:仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

使用这两个属性再加上一些表格的方法就可以实现，无需多余的代码，实现代码如下：

<div class="test">
    <el-table
      :data="tableData"
      ref="table"
      style="width: 50%"
      :row-key="getKey"
      @selection-change="handleChangeSelection"
    >
      <el-table-column type="selection" width="55" reserve-selection>
      </el-table-column>
      <el-table-column label="日期">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleChangePagination"
      @current-change="handleChangePagination"
      :current-page.sync="paginationData.page"
      :page-sizes="[2, 5, 10, 20, 50]"
      :page-size="paginationData.page_size"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 20,
      paginationData: {
        page: 1,
        page_size: 5,
      },
      arrSelection: [],
    };
  },

  methods: {
    getKey(row) {
      return row.id;
    },
    getTables() {
      console.log(this.arrSelection, "arrSelection");
    },
    // 当选择项发生变化时会触发该事件，selection就是选择的数据
    handleChangeSelection(selection) {
      this.arrSelection = selection;
    },
    handleChangePagination() {
      // 请求表格数据
    },
  },
  mounted() {
    this.handleChangePagination();
  },
};
</script>