Element-ui-加vue的分页记忆功能

    <el-table ref="addgsryArr" :data="PublicNotifierData" tooltip-effect="dark" border style="width: 100%" @selection-change="handleSelectionChange" :row-key="getRowKeys">
                        <el-table-column :rules="rules" type="selection" :reserve-selection="true" width="55" ></el-table-column>
                        <el-table-column prop="sqrxm" label="申请人" width="150"></el-table-column>
                        <el-table-column prop="zjhm" label="身份证" width="190"></el-table-column>
                        <el-table-column prop="lxdh" label="联系电话" width="160"></el-table-column>
                        <el-table-column prop="xjzsqname" label="现居住社区" width="312"></el-table-column>
                        <el-table-column prop="slsj" label="受理时间" width="180"></el-table-column>
                    </el-table> 
        <div>
          <el-pagination 
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pageNum"
              :page-sizes="[10,20,50]"
              layout="total,sizes,prev,pager,next"
              :total="total"
          ></el-pagination>
        </div>

在data中定义一个唯一的row-key
export default {
data() {

return {
  getRowKeys(PublicNotifierData){
    return PublicNotifierData.sqrbh
  },

methods中写对应的分页方法

handleSelectionChange(val){
  this.addgsryArr="";
  for(let i=0;i<val.length;i++){
    this.addgsryArr+=(val[i].sqrbh)+","
  }
  console.log(this.addgsryArr);
},
//分页
handleSizeChange(val){
  console.log("pageSize",val);
  this.pageSize=val;
  this.addSeaRch()
},
handleCurrentChange(val){
  console.log("pageNum",val);
  this.pageNum=val;
  this.addSeaRch();
},

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理