element-ui table 翻页记忆功能

微信截图_20190425170144.png

首先需要安装element，并且引入。

//main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

下面是主要代码

<template>
    <div id="app">
        <div class="old-customers-list">
            <el-button type="primary" @click="setPassword">打开弹窗</el-button>
            <el-dialog
                :visible.sync="apDialogVisible"
                title="批量添加管家密码"
                width="80%"
            >
                <div>① 请选择需下发管家密码的门锁（已选择 {{ selectedData.length }} 个）</div>
                <el-table
                    ref="multipleTable"
                    :data="ap_list"
                    :row-key="getRowKeys"
                    @selection-change="handleSelectionChange"
                    style="width: 100%"
                >
                    <el-table-column type="selection" :reserve-selection="true" prop="id"></el-table-column>
                    <el-table-column prop="lock_name" label="锁名称"></el-table-column>
                    <el-table-column prop="room_status" label="房间状态"></el-table-column>
                    <el-table-column prop="room_contract_status" label="房间合同状态"></el-table-column>
                    <el-table-column prop="password_status" label="管家密码状态"></el-table-column>
                </el-table>
                <el-row class="top-margin">
                    <el-pagination
                        :current-page.sync="apObj.page_index"
                        :page-size="apObj.page_size"
                        :total="apObj.aptotal"
                        layout="total, prev, pager, next"
                        style="float:right;"
                    >
                    </el-pagination>
                </el-row>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import Data from "./js/data.json";
export default {
    data() {
        return {
            apDialogVisible: false,
            ap_list: [],
            apObj: {
                page_index: 1,
                page_size: 10,
                aptotal: Data.length,
            },
            // 获取row的key值
            getRowKeys(row) {
                return row.id;
            },
            selectedData: []
        }
    },
    watch: {
        "apObj.page_index": {
            handler(newVal, oldVal) {
                this.ap_list = Data.slice((newVal - 1)*10, (newVal - 1)*10 + 10);
            }
        }
    },
    methods: {
        handleSelectionChange(rows) {
            this.selectedData = [];
            if (rows) {
                rows.forEach(row => {
                    if (row) {
                        this.selectedData.push(row);
                    }
                });
            }
        },
        setPassword() {
            this.apDialogVisible = true;
            this.apObj.page_index = 1;
            this.ap_list = Data.slice(0, 10);
            this.$nextTick(() => {
                this.$refs.multipleTable.clearSelection();
            });
        },
    },
}
</script>

其中数据是存在同级js文件夹下的data.json文件。

[
    {
        "id": 1,
        "lock_name": "1栋101",
        "room_status": "空闲可租",
        "room_contract_status": "",
        "password_status": ""
    },
    {
        "id": 2,
        "lock_name": "1栋102",
        "room_status": "已预订",
        "room_contract_status": "待执行",
        "password_status": "已失效"
    },
    {
        "id": 3,
        "lock_name": "1栋106",
        "room_status": "已锁定",
        "room_contract_status": "",
        "password_status": "已失效"
    },
    {
        "id": 4,
        "lock_name": "1栋107",
        "room_status": "空闲可租",
        "room_contract_status": "编制中",
        "password_status": "使用中"
    },
    {
        "id": 5,
        "lock_name": "1栋108",
        "room_status": "空闲可租",
        "room_contract_status": "已关闭",
        "password_status": "已失效"
    },
    {
        "id": 6,
        "lock_name": "1栋101",
        "room_status": "空闲可租",
        "room_contract_status": "",
        "password_status": ""
    },
    {
        "id": 7,
        "lock_name": "1栋102",
        "room_status": "已预订",
        "room_contract_status": "待执行",
        "password_status": "已失效"
    },
    {
        "id": 8,
        "lock_name": "1栋106",
        "room_status": "已锁定",
        "room_contract_status": "",
        "password_status": "已失效"
    },
    {
        "id": 9,
        "lock_name": "1栋107",
        "room_status": "空闲可租",
        "room_contract_status": "编制中",
        "password_status": "使用中"
    },
    {
        "id": 10,
        "lock_name": "1栋108",
        "room_status": "空闲可租",
        "room_contract_status": "已关闭",
        "password_status": "已失效"
    },
    {
        "id": 11,
        "lock_name": "1栋101",
        "room_status": "空闲可租",
        "room_contract_status": "",
        "password_status": ""
    },
    {
        "id": 12,
        "lock_name": "1栋102",
        "room_status": "已预订",
        "room_contract_status": "待执行",
        "password_status": "已失效"
    },
    {
        "id": 13,
        "lock_name": "1栋106",
        "room_status": "已锁定",
        "room_contract_status": "",
        "password_status": "已失效"
    },
    {
        "id": 14,
        "lock_name": "1栋107",
        "room_status": "空闲可租",
        "room_contract_status": "编制中",
        "password_status": "使用中"
    },
    {
        "id": 15,
        "lock_name": "1栋108",
        "room_status": "空闲可租",
        "room_contract_status": "已关闭",
        "password_status": "已失效"
    },
    {
        "id": 16,
        "lock_name": "1栋101",
        "room_status": "空闲可租",
        "room_contract_status": "",
        "password_status": ""
    },
    {
        "id": 17,
        "lock_name": "1栋102",
        "room_status": "已预订",
        "room_contract_status": "待执行",
        "password_status": "已失效"
    },
    {
        "id": 18,
        "lock_name": "1栋106",
        "room_status": "已锁定",
        "room_contract_status": "",
        "password_status": "已失效"
    },
    {
        "id": 19,
        "lock_name": "1栋107",
        "room_status": "空闲可租",
        "room_contract_status": "编制中",
        "password_status": "使用中"
    },
    {
        "id": 20,
        "lock_name": "1栋108",
        "room_status": "空闲可租",
        "room_contract_status": "已关闭",
        "password_status": "已失效"
    },
    {
        "id": 21,
        "lock_name": "1栋108",
        "room_status": "空闲可租",
        "room_contract_status": "已关闭",
        "password_status": "已失效"
    },
    {
        "id": 22,
        "lock_name": "1栋101",
        "room_status": "空闲可租",
        "room_contract_status": "",
        "password_status": ""
    },
    {
        "id": 23,
        "lock_name": "1栋102",
        "room_status": "已预订",
        "room_contract_status": "待执行",
        "password_status": "已失效"
    },
    {
        "id": 24,
        "lock_name": "1栋106",
        "room_status": "已锁定",
        "room_contract_status": "",
        "password_status": "已失效"
    },
    {
        "id": 25,
        "lock_name": "1栋107",
        "room_status": "空闲可租",
        "room_contract_status": "编制中",
        "password_status": "使用中"
    },
    {
        "id": 26,
        "lock_name": "1栋108",
        "room_status": "空闲可租",
        "room_contract_status": "已关闭",
        "password_status": "已失效"
    },
    {
        "id": 27,
        "lock_name": "1栋101",
        "room_status": "空闲可租",
        "room_contract_status": "",
        "password_status": ""
    },
    {
        "id": 28,
        "lock_name": "1栋102",
        "room_status": "已预订",
        "room_contract_status": "待执行",
        "password_status": "已失效"
    },
    {
        "id": 29,
        "lock_name": "1栋106",
        "room_status": "已锁定",
        "room_contract_status": "",
        "password_status": "已失效"
    },
    {
        "id": 30,
        "lock_name": "1栋107",
        "room_status": "空闲可租",
        "room_contract_status": "编制中",
        "password_status": "使用中"
    },
    {
        "id": 31,
        "lock_name": "1栋108",
        "room_status": "空闲可租",
        "room_contract_status": "已关闭",
        "password_status": "已失效"
    }
]