# 服务端数据分页PageStore

# Demo

    <el-table
      :data="store.list"
      style="width: 100%"
      :height="height"
    >
      <el-table-column prop="shopname" label="门店" width="180"></el-table-column>
    </el-table>
    <div class="text-center">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="store.totalPage"
        :current-page="nowPage"
        v-on:current-change="handlerPageChange"
      >
      </el-pagination>
    </div>
  import {PageStore, Global} from 'sjfx';
  import Config from '@/config'
  
  export default {
    data() {
      return {
        store: new PageStore(Config.adminApi),
        nowPage: 1,
        height: Global.get('winHeight') - 150
      }
    },
    methods: {
      load() {
        this.store.load(this.nowPage, {
          type: 1
        }).then((data) => {
          data.forEach((item) => {
            this.$set(item, 'statusText', Config.signStatus[item.f_status]);
          });
        });
      },
      handlerPageChange(newPage) {
        this.nowPage = newPage;
        this.load();
      },
	}
}  

# 保持选中

# 主要代码

      load() {
        this.store.load(this.nowPage).then((data) => {
          data.forEach((item) => {
            if (this.store.isSelect(item, 'id')) {
              this.$refs.myTable.toggleRowSelection(item);
            }
          });
        });
      },
      handleSelectionChange(val) {
        this.store.keepSelect(val, 'id');
      },

# 完整实例

<template>
  <div>
    <el-table
      :data="store.list"
      style="width: 100%"
      :height="height"
      ref="myTable"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
    </el-table>
    <div class="text-center">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="store.totalPage"
        :current-page="nowPage"
        v-on:current-change="handlerPageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {PageStore, Global} from 'sjfx';

  export default {
    data() {
      return {
        store: new PageStore('/api/open.ashx', 'note_topic_list_page'),
        nowPage: 1,
        height: Global.get('winHeight') - 150
      }
    },
    created() {
      this.load();
    },
    methods: {
      load() {
        this.store.load(this.nowPage).then((data) => {
          data.forEach((item) => {
            if (this.store.isSelect(item, 'id')) {
              this.$refs.myTable.toggleRowSelection(item);
            }
          });
        });
      },
      handleSelectionChange(val) {
        this.store.keepSelect(val, 'id');
      },
      handlerPageChange(newPage) {
        this.nowPage = newPage;
        this.load();
      }
    }
  }
</script>
Last Updated: 1/14/2020, 12:00:52 PM