Vue元素用户界面实现表格的分页功能示例

本文介绍了某视频剪辑软件元素用户界面实现表格的分页功能示例，分享给大家，具体如下：

实现效果如下图所示：

模板部分：

El-table : data=' TempList ' : header-cell-style=' row class '条纹边框样式='边距-底部：14像素；':空-文本='空文本' El-表格-列属性='name '标签='债券名称宽度=' 228 '/El-表格-列El-表格-列属性='marketValue '标签='市值width=' 228 ' align=' right ' : formatter=' format decimal 2 '/El-table-column El-table-column属性='type '标签='债券类型/El-表格-列El-表格-列属性='比率'标签='占母基金的比重align=' right ' : formatter=' toPercent '/El-table-column/El-table div class=' pagination class ' El-pagination @ size-change=' handlesizechange 1 ' @ current-change=' handlecurrent 1 ' : current-page=' current Page 1 ' : Page-size='[10，20，50，100]' : Page-size=' Page size ' layout=' total，size，prev，Page，Page数据部分：获取测试的数据(19个)

data() { return { total1: 0，currentPage1:1，pageSize:10，bondsall list :[{ ' name ' : ' 16协信01","市场价值": 691861.0999317318,"类型":信用债，' ratio ' : 0.0027959958264152343 }，{ 'name': '16朗诗01 ','市场价值' : 690131.4471819025,'键入' : '信用债，'比率' : 0.002789005836849196 },{ '姓名' : '16三盛01","市场价值": 688816.9110920322,"类型":信用债，'比率' : 0.0027836934447790073 },{ '姓名' : '17三鼎01 ','市场价值' : 685426.7917023668,'键入' : '信用债，' ratio ' : 0.00276993065229573 }，{ 'name': '16临开债、"市场价值": 676640.4401650192、"类型":信用债，'比率' : 0.00273448506769905 },{ '姓名' : '16华讯01 ','市场价值' : 614990.17198298,'键入' : '信用债，'比率' : 0.0024853398381849607 },{ '姓名' : '16花样03","市场价值": 614990.0028613778,"类型":信用债，'比率' : 0.0024853391547193142 }, { 'name': '15协信01 ','市场价值' : 614987.6443837617,'键入' : '信用债，' ratio ' : 0.0024853296234802085 }，{ 'name': '16三盛03 ','市场价值' : 461240.73328782123,'键入' : '信用债，' ratio ' : 0.0018639972176101563 }，{ 'name': '16山钢' 03 ','市场价值' : 384367.27773985104,键入' : '信用债，'比率' : 0.0015533310146751303 },{ '姓名' : '14甘公01","市场价值": 324002.01240352966,"类型":信用债，' ratio ' : 0.0013093788254893862 }，{ 'name': '15新湖债、"市场价值": 307493.82219188084信用债，' ratio ' : 0.0012426648117401043 }，{ 'name': '16珠管01","市场价值": 303035.16177009855,"类型":信用债，'比率' : 0.0012246461719698726,{ '姓名' : '16重机债、"市场价值": 299103.36126325984、"类型":信用债，' ratio ' : 0.0012087567140880767 }，{ 'name': '17三鼎01 ','市场价值' : 8163.960979194436信用债，'比率： 3.2992750751699765E-5 }， { 'name': '16重机债、"市场价值": 1475.2323613477674、"类型":信用债，'比率： 5.961808700804324E-6 }，{ '姓名' : '14甘公01","市场价值": 723.1485963397557,"类型":信用债，'比率： 2.92243697100979E-6 }，{ '姓名' : '15新湖债、"市场价值": 707.2357910413259、"类型":信用债，'比率： 2.85812906700224E-6 }，{ '姓名' : '16珠管01 ','市场价值' : 153.74691109594042,'类型' : '信用债，'比率' : 6.213324058700521 E-7 }]} }方法部分：

方法： { handlesizechange 1:函数(pageSize) { //每页条数切换这个。页面大小=页面大小。handlecurrentchange 1(这。当前页面1)；}，handleCurrentChange1:函数(当前页面){//页码切换这个。当前页面1=当前页面this。当前更改页面(这。bondsalllist，currentPage) }，//分页方法（重点)currentChangePage(列表，当前页面){ let from=(当前页面-1)* this。页面大小；let to=CurrentPage * this。页面大小；这个。templist=[]；for(；从到；from){ if(list[from]){ this。临时列表。推送(列表[来自])；} } },}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。