时间:2021-05-26
分页的实现(Vue+Element)+输入框关键字筛选
1.这里用的是Element 自带的分页组件
<template><div class="sales-table"><div class="order-list-header">订单列表</div><div class="back-box"><div class="search-box"><input type="text" name="" id="" class="order-search-input" placeholder="关键词" v-model='search'></div></div><div class="table-box"><div class="table-list" v-for="(cash, index) in orderList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="cash.id"><table id="tableSort" style="table-layout:fixed;"><thead class="table-header"><tr><th class="left-radius">序号</th><th>创建时间</th><th>订单ID</th><th>所属用户姓名</th><th>所属用户ID</th><th>所属用户手机</th><th>所属用户层级</th><th>订单金额</th><th>订单状态</th><th>审核状态</th><th>收件人</th><th>联系电话</th><th>收货地址</th><th>订单备注</th><th class="right-radius">操作</th></tr></thead><tbody class="table-lists"><tr class="first-tr"><td class="sequence">{{ index+1>9?index+1:"0"+(index+1) }}</td><td class="sequence">{{cash.createTime}}</td><td class="sequence">{{cash.orderId}}</td><td class="sequence">{{cash.cilentName}}</td><td class="sequence">{{cash.cilentId}}</td><td class="sequence">{{cash.cilentPhone}}</td><td class="sequence">{{cash.cilentGrade}}</td><td class="sequence money">¥{{cash.orderPrice}}</td><td class="sequence">{{cash.orderState}}</td><td class="sequence">{{cash.auditState}}</td><td class="sequence">{{cash.receiver}}</td><td class="sequence">{{cash.phone}}</td><td class="sequence">{{cash.address}}</td><td class="sequence">{{cash.orderRemark}}</td><td class="sequence"><a class="view-order">查看</a><a class="edit-order">编辑</a><a class="delete-order">删除</a></td></tr></tbody></table></div></div><-- 分页 --><div class="page"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 40]":page-size="pagesize"layout="total, sizes, prev, pager, next, jumper":total="Cashdata.length"></el-pagination></div></div></template>2.文中标红的字不再是循环数组,名字随意取,在后面搜索关键字部分也标红了。数据多分页效果会更加明显。
3.分页的CSS只是自己修改的部分,如有需要,请自行脑补。对了,补充一句,修改Eleement样式时,先在样式前加 /deep/.最外层类名{......}。
4.如有问题,欢迎指教。
附上效果图一份:
总结
以上所述是小编给大家介绍的Vue 实现分页与输入框关键字筛选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码:h
1,使用Excel对关键词去重打开Excel软件,将所有的关键字导入,,选择数据-筛选-高级筛选点击列表区域输入框,然后可以在表内选择要删除重复的数据区域,点选
主要修改了两个地方:一、上下选择与输入值同步问题。 输入关键字后,当出现了下拉选项,用键盘的上下键选择时,关键字输入框的值,没有与你选择的值同步。插件是老外写
找关键字普遍的10钟方式: 一.天猫淘宝主页搜索下拉框 键入商品关键字,输入框会全自动配对近期搜索指数大的关键字,有时消费者也会挑选搜索下拉框强烈推荐的词句
一、什么叫关键字关键字实际上便是顾客会在淘宝网搜索框键入的搜索关键词,如男性T恤,男性T恤全棉。对顾客而言:根据输入框检索某一关键字如(男性T恤)去寻找诸多产品