vue element 靜態分頁
阿新 • • 發佈:2021-11-19
分頁靜態資料
tableData: [ { date: "2016-05-02", name: "王小虎1", sex: "男", state: false, address: "上海市普陀區金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎2", sex: "男", state: false, address: "上海市普陀區金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎3", sex: "男", state: true, address: "上海市普陀區金沙江路 1519 弄", }, { date: "2016-05-03", name: "王小虎4", sex: "男", state: true, address: "上海市普陀區金沙江路 1516 弄", }, ],
table的data屬性
分頁計算:(當前頁碼-1)*頁碼顯示資料數 並且不能大於當前頁碼 * 頁碼顯示資料數
//slice切片(開始,結束) :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)" //分頁繫結 <el-pagination background layout="sizes,prev, pager, next" :total="tableData.length" :page-size="pageSize" @current-change="currentChange" @size-change="handleSizeChange" :page-sizes="[1,3,6]" :current-page="currentPage" > </el-pagination>
定義引數
//注意,定義的pageSize需要與分頁的:page-sizes陣列第一項一致 pageSize:1, currentPage:1 //實現方法: currentChange(e) { this.currentPage = e; }, handleSizeChange(val) { console.log(val); this.pageSize = val; },