好资源导航 » 文章资讯 » Vue 实现分页与输入框关键字筛选功能

Vue 实现分页与输入框关键字筛选功能

2023-08-03 16:17:04 60

分页的实现(Vue+Element)+输入框关键字筛选

1.这里用的是Element自带的分页组件

2.文中标红的字不再是循环数组，名字随意取，在后面搜索关键字部分也标红了。数据多分页效果会更加明显。

3.分页的CSS只是自己修改的部分，如有需要，请自行脑补。对了，补充一句，修改Eleement样式时，先在样式前加/deep/.最外层类名{......}。


/deep/.el-pagination{
margin-bottom:30px;
margin-top:30px;
float:right;
font-size:20px;
color:#333333;
margin-right:55px;
font-weight:normal;

.el-select.el-input{
width:126px;
height:36px;
}
.el-select.el-input.el-input__inner{
height:100%;
font-size:20px;
color:#333333;
}
.el-pagination__editor.el-input.el-input__inner{
height:36px;
}
.btn-prev,.btn-next{
height:36px;
}
.btn-prev{
border-radius:5px005px;
}
.btn-next{
border-radius:05px5px0;
}
.el-pagerli{
line-height:36px;
height:36px;
font-size:20px;
}
.el-pagination__total{
color:#333333;
}
button,span:not([class*=suffix]){
height:36px;
line-height:36px;
font-size:20px;
color:#333333;
}
.el-pagination__editor.el-input{
font-size:20px;
}
}

4.如有问题，欢迎指教。

附上效果图一份：

总结

以上所述是小编给大家介绍的Vue实现分页与输入框关键字筛选功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue 实现分页与输入框关键字筛选功能

热门推荐

随机推荐