Vue和Element-ui实现分页,刷新时数据保持选中的状态不会恢复成默认。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--引入远程element-ui的样式-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <div style="width: 80%;margin: 30px auto">
                <el-table :data="tableData | pagination(thisSearch.page,thisSearch.pageSize)" style="width: 100%;">
                    <el-table-column prop="date" label="日期"></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="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="thisSearch.page"
                        :page-size="thisSearch.pageSize"
                        :page-sizes="pages"
                        layout=" prev, pager, next, sizes, jumper"
                        :total="tableData.length">
                </el-pagination>
            </div>
        </div>
    </body>
    <!-- 引入远程组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
		new Vue({
     
			el: '#app',
			data: function () {
     
				return {
     
				    tableData:[],
                    thisSearch:{
     
				        page:1,
                        pageSize:1
                    },
                    pages:[1,2,5]
				}
			},
			methods:{
     
			    //每页显示的条数
                handleSizeChange(val) {
     
                    console.log(`每页 ${
       val} 条`);
                    this.thisSearch.pageSize=val;
                },
                //当前页的页码数
                handleCurrentChange(val) {
     
                    console.log(`当前页: ${
       val}`);
                    this.thisSearch.page = val;
                },
                init(){
     
                    let data =[{
     
                        date: '2016-05-01',
                        name: '王',
                        address: '上海市普陀区金沙江路 151 弄'
                    }, {
     
                        date: '2016-05-02',
                        name: '王小',
                        address: '上海市普陀区金沙江路 152弄'
                    }, {
     
                        date: '2016-05-03',
                        name: '王虎',
                        address: '上海市普陀区金沙江路 153 弄'
                    }, {
     
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 154 弄'
                    }];
                    this.tableData = data
                }
			},
            created(){
     
                this.init();
                //每页的页码数,以及当前的页条数。
                this.thisSearch.page = Number(localStorage.getItem('page')) || 1;
                this.thisSearch.pageSize = Number(localStorage.getItem('pageSize')) || 1;
                this.handleSizeChange(this.thisSearch.pageSize);
                this.handleCurrentChange(this.thisSearch.page)
            },
            filters:{
     
			    //分隔数据
			    pagination(tableData,page,pageSize){
     
			        let offset = (page - 1) * pageSize;  //当前页的第一条索引
                    let data = (offset + pageSize >= tableData.length) ? tableData.slice(offset,tableData.length): tableData.slice(offset,offset + pageSize);
                    return data
                }
            },
            beforeUpdate(){
     
			    //把当前页的页码数,以及页码条数存储起来,刷新的时候还可以展示在本地。
			    localStorage.setItem('page',this.thisSearch.page);
			    localStorage.setItem('pageSize',this.thisSearch.pageSize)
            },
            beforeDestroy(){
     
                //页面销毁的时候,把每页的页码,以及当前的每页条数恢复成默认。
                localStorage.setItem('page','1');
                localStorage.setItem('pageSize','1')
            }
		})
    </script>

</html>

效果图
Vue和Element-ui实现分页,刷新时数据保持选中的状态不会恢复成默认。_第1张图片
Vue和Element-ui实现分页,刷新时数据保持选中的状态不会恢复成默认。_第2张图片

你可能感兴趣的:(HTML5,vue)