Vue-cli+Element （Pagination 分页）

￡神魔★判官ぃ 2023-01-10 14:37 135阅读 0赞

### start+number （0-10，10-10，20-10…） ###

> <template>  
>     <el-pagination  
>         :page-size="searchData.number"  
>          background  
>          @current-change="changePage"  
>          @prev-click="changePage"  
>          @next-click="changePage"  
>          layout="prev, pager, next"  
>          :current-page.sync = "currPage"  
>          :total="total">  
>     </el-pagination>  
> </template>
> 
> <script>  
>     export default \{  
>         name: "setsite",  
>         data()\{  
>           return \{  
>             searchData: \{  
>               number: 10,  
>               start: 0,  
>             \},  
>             currPage: 1,  
>             total: 0  
>             \}  
>         \},  
>         methods:\{  
>               // 获取数据的方法  
>               setList() \{\},  
>               // 分页  
>               changePage(val)\{  
>                 this.searchData.start = this.calcStart(val, this.searchData.number)  
>                 this.setList()  
>               \},  
>               calcStart(val, number) \{  
>                 return (val - 1) \* number  
>               \},  
>             \}  
>           \}  
> <script>  
>

![在这里插入图片描述][20181121144741115.png]

# **page+pageSize（1-10，2-10，3-10…） ** #

> **<el-pagination  
>     :page-size="pageSize"  
>     background  
>     @current-change="changePage"  
>     @prev-click="changePage"  
>     @next-click="changePage"  
>     layout="prev, pager, next"  
>     :current-page.sync = "currPage"  
>     :total="total">  
> </el-pagination>  
> <script>  
> export default \{  
>     name: "setsite",  
>     data()\{  
>     return \{  
>       page:1,  
>       pageSize:8,  
>       currPage: 1,  
>       total:0,  
>     \}  
>     \},  
>     methods:\{  
>       // 获取数据的方法  
>       setList() \{\},  
>          // 分页  
>       changePage(val)\{  
>           this.page=val;  
>       this.setList()            
>         \},  
>     \}  
> \}  
> <script>**  
>

![在这里插入图片描述][20181121144741115.png]

[20181121144741115.png]: /images/20221119/cc94540e91184794a8427155b360c778.png