快捷搜索: 长连接 前端 源码 pan

elementui table表格跨分页多选

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>
经验分享 程序员 微信小程序 职场和发展