介绍 & lt; template>
& lt; div 类=皊ales-table"祝辞
& lt; div 类=皁rder-list-header"祝辞订单列表& lt;/div>
& lt; div 类=癰ack-box"祝辞
& lt; div 类=皊earch-box"祝辞& lt; input 类型=皌ext", name=啊? id=啊?类=皁rder-search-input",占位符=肮丶省?v模型=& # 39;搜索# 39;祝辞& lt;/div>
& lt;/div>
& lt; div 类=皌able-box"祝辞
& lt; div 类=皌able-list", v=?现金,,指数),拷贝orderList.slice ((currentPage-1) *页大小,当前页*页大小)“,:关键=癱ash.id"比;
& lt; table id=皌ableSort",比;
& lt; thead 类=皌able-header"祝辞
& lt; tr>
& lt; th 类=發eft-radius"祝辞序号& lt;/th>
& lt; th>创建时间& lt;/th>
& lt; th>订单ID
& lt; th>所属用户姓名& lt;/th>
& lt; th>所属用户ID
& lt; th>所属用户手机& lt;/th>
& lt; th>所属用户层级& lt;/th>
& lt; th>订单金额& lt;/th>
& lt; th>订单状态& lt;/th>
& lt; th>审核状态& lt;/th>
& lt; th>收件人& lt;/th>
& lt; th>联系电话& lt;/th>
& lt; th>收货地址& lt;/th>
& lt; th>订单备注& lt;/th>
& lt; th 类=皉ight-radius"祝辞操作& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody 类=皌able-lists"祝辞
& lt; tr 类=癴irst-tr"祝辞
& lt; td 类=皊equence"在{{+ 1,指数在9 ?指数+ 1:“0,+(指数+ 1),}}& lt;/td>
& lt; td 类=皊equence"在{{cash.createTime}} & lt;/td>
& lt; td 类=皊equence"在{{cash.orderId}} & lt;/td>
& lt; td 类=皊equence"在{{cash.cilentName}} & lt;/td>
& lt; td 类=皊equence"在{{cash.cilentId}} & lt;/td>
& lt; td 类=皊equence"在{{cash.cilentPhone}} & lt;/td>
& lt; td 类=皊equence"在{{cash.cilentGrade}} & lt;/td>
& lt; td 类=皊equence money"在￥{{cash.orderPrice}} & lt;/td>
& lt; td 类=皊equence"在{{cash.orderState}} & lt;/td>
& lt; td 类=皊equence"在{{cash.auditState}} & lt;/td>
& lt; td 类=皊equence"在{{cash.receiver}} & lt;/td>
& lt; td 类=皊equence"在{{cash.phone}} & lt;/td>
& lt; td 类=皊equence"在{{cash.address}} & lt;/td>
& lt; td 类=皊equence"在{{cash.orderRemark}} & lt;/td>
& lt; td 类=皊equence"祝辞& lt; a 类=皏iew-order"在查看& lt;/a> & lt; a 类=癳dit-order"祝辞编辑& lt;/a> & lt; a 类=癲elete-order"在删除& lt;/a> & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/div>
& lt;/div>
& lt;,,分页,——比;
& lt; div 类=皃age"祝辞
& lt; el-pagination
@size-change=癶andleSizeChange"
@current-change=癶andleCurrentChange"
:当前页面=癱urrentPage"
:页面大?癧5,10,20日,40)“;
:页面大?皃agesize"
布局=白?,大小,,上一页,,寻呼机,接下来,,jumper"
:总=癈ashdata.length"比;
& lt;/el-pagination>
& lt;/div>
& lt;/div>
& lt;/template> & lt; script>
export default {
数据(),{
return {
当前页:1,,//初始页//页大小:10日每页的数据//,搜索关键词
搜索:““,
Cashdata: [{
createTime:“2019/1/21/, 14:30:30",
orderId:,“1555555454”,
cilentName:“网三“,
cilentId:“21313216544”,
cilentPhone:“13976605432”,
cilentGrade:“1”,
orderPrice:“454664”,
orderState:“已提交“,
auditState:“系统已确认“,
接收器:“和大宝“,
电话:“16565644444”,
地址:“广东省深圳市* * * * * * * * * * * * * * * * * * * * * * * * *”,
orderRemark:“少放醋,多方唐撒旦啊阿萨大萨达“;
},
{
createTime:“2019/1/21/, 14:30:30",
orderId:,“1555555454”,
cilentName:“网三“,
cilentId:“21313216544”,
cilentPhone:“15576605432”,
cilentGrade:“1”,
orderPrice:“454664”,
orderState:“已提交“,
auditState:“系统已确认“,
接收器:“和大宝“,
电话:“16565644444”,
地址:“广东省深圳市* * * * * * * * * * * * * * * * * * * * * * * * *”,
orderRemark:“少放醋,多方唐撒旦啊阿萨大萨达“;
},
]};
},
方法:,{//,初始页当前页,初始每页数据数页大小和数据的数据
handleSizeChange: function (大小),{
时间=this.pagesize 规模;
console.log (this.pagesize),//每页下拉显示数据
},
handleCurrentChange:函数(当前页){
this.currentPage =,当前页;
时间=document.documentElement.scrollTop 0;//点击翻页的时候回到顶部
console.log (this.currentPage),//点击第几页
},
},//,订单列表搜索关键字
计算:{
orderList:函数(),{
var _search =, this.search;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍Vue怎么实现分页与输入框关键字筛选功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
分页的实现(Vue +元素)+输入框关键字筛选
<强> 1。这里用的是元素自带的分页组件
2。文中标红的字不再是循环数组,名字随意取,在后面搜索关键字部分也标红了。数据多分页效果会更加明显。
