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

缺乏、安全感 2023-06-28 06:15 68阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            
            <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>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107183006329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200107183019159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz,size_16,color_FFFFFF,t_70