element-ui实现表格分页和搜索功能
一.首先展示下做出的页面效果
1.以下页面是物资列表界面,将所有的物资分页展示出来。
2.将搜索内容分页展示出来,以下页面是含关键字“子”时展示的数据
3.当搜索框为空时展示全部数据
二.具体的实现
1.物资列表分页显示是使用了element-ui中el-table和el-pagination标签。代码如下:
div class="table_resource" style="text-align:center"><el-table :data="showTable" border style="width: 100%"><el-table-column type="index" prop="order" label="序号" width="150" align="center"></el-table-column><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column prop="name" label="名称" width="120" align="center"></el-table-column><el-table-column prop="unit" label="单位" width="120" align="center"></el-table-column><el-table-column prop="quantity" label="数量" width="120" align="center"></el-table-column><el-table-column prop="unitPrice" label=" 单价" width="120" align="center"></el-table-column><el-table-column prop="totalPrice" label="总价(元)" width="120" align="center"><div slot-scope="scope">{{scope.row.totalPrice=scope.row.quantity*scope.row.unitPrice}}</div></el-table-column><el-table-column prop="remarks" label="备注" width="338" align="center"></el-table-column></el-table></div><div class="resource-page"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":page-sizes="[3,5,15]" :page-size="pagesize" :pager-count="7"layout=" prev, pager, next,sizes, jumper" :total="filterDataShow.length"></el-pagination></div>
2.el-table中data是需要在表格中展示的数据。将data属性设置为计算属性,可以根据计算属性的内容将表格分页展示出来。
3.current-change事件会在当前页面发生变化时触发,绑定的是handleCurrentChange方法。
4. pagesize属性绑定的是每页展示的物资个数
5.page-sizes是个number[]数组类型,里面的值代表每页可供选择的展示条目个数。表格的总页数是和此值有关系的。比如总共有15条数据,当page-sizes选择的值为5时,表格每页会展示5条数据,那15/5=3,表格的总页数就是3页,layout中的pager在页面中会出先3个页码按钮,分别为1,2,3。如下图所示
当把page-sizes选择的值为3时,表格每页会展示3条数据,那15/3=5,表格的总页数就是5页,layout中的pager在页面中会出现5个页码按钮,分别为1,2,3,4,5。如下图所示
即使page-sizes数组里已经定义了数据,但是pagesize必须在data中定义,并且赋值,否则会报错。pagesize的赋的值可以和page-sizes数组里的值没有关系,因为page-sizes数组中的第一个值会被默认为首选项,并且将pagesize的值覆盖掉。
5.page-count表示页码按钮的数量,它的值必须为5-21之间的奇数!
6.layout是组件布局,子组件名可以按照需求调换顺序,并用逗号分隔。
三.核心的JS代码
<script>var vm = new Vue({el: '#app',data: {keywords: '', // 搜索的关键字filterDataShow: [], //储存符合条件的数据tableData: [{index: '1',name: '圆珠笔',unit: '支',quantity: '45',unitPrice: '2',remarks: '物资充足'},{index: '2',name: '纸张',unit: '页',quantity: '52',unitPrice: '4',remarks: '物资充足'},{index: '3',name: '椅子',unit: '把',quantity: '34',unitPrice: '6',remarks: '物资充足'},...], //分页前的数据pagesize: 4,currentPage: 1,},methods: {searchResource() {this.currentPage = 1; //将当前页设置为1,确保每次都是从第一页开始搜let filterKeywords = this.keywords.trim();let filerReasource = this.tableData.filter(item => { //过滤全部数据if (item.name.includes(filterKeywords)) {return item}})this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow},onSubmit() {},handleSizeChange(psize) {this.pagesize = psize;},handleCurrentChange(currentPage) {this.currentPage = currentPage;}},mounted() {this.searchResource(); //在页面挂载后调用此方法,确保数据与页面发生了交互},watch: { //监听搜索框内容,当搜索框内容发生变化时调用searchResource方法keywords: {handler() {this.searchResource()}}},computed: {//showTable计算属性通过slice方法计算表格当前应显示的数据showTable() {return this.filterDataShow.slice((this.currentPage - 1) * this.pagesize,this.currentPage * this.pagesize);}}})
</script>
以上是我在写表格分页的心得及自己的一些看法,如有错误,欢迎指正。
感谢此博文https://blog.csdn.net/Dg_Zing/article/details/87906371给与的指导。
element-ui实现表格分页和搜索功能相关推荐
- vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景 按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能 导出功能截图 二.安装相关依赖 cnpm install --save xl ...
- element ui 实现表格分页
1. 创建表格 <template><el-table:data="tableData"style="width: 100%">< ...
- Element ui实现tabel分页选中记忆功能
敲重点: :row-key="getRowKeys".:reserve-selection="true" . type="selection" ...
- element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现 查看Element官网 关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
- Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能 主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
- layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索 在 reload:function () { var keyWord=$("#keyWord").v ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- Element UI Table表格样式调整
调整Element UI Table表格的样式 最终效果: 单元格合并,样式调整 模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
- element UI 修改表格边框颜色
element UI 修改表格边框颜色 由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
最新文章
- IDEA插件推荐:中文字符自动转化!
- C语言中assert()断言函数的概念及用法
- PadLeft 和 PadRight
- python asyncio和celery对比_如何将Celery与asyncio结合? - python
- 反射学习系列3-反射实例应用
- 前端学习(1664):前端系列实战课程之阻止复制
- python数据运算
- java 数组合并_数组与链表
- P1364 医院设置 洛谷
- 智能优化算法:鲸鱼优化算法-附代码
- 设计自己的ImageLoader图片加载框架
- 换手率:为什么美国人不爱频繁申赎基金?
- Java和C++的对照
- 信用评分卡模型分析(基于Python)--理论部分
- 数据挖掘第三版课后习题
- 【IC】低功耗设计理论知识
- 服务器cpu型号知识普及,小白进阶教程 十个问题看懂CPU该如何选
- RT-Thread 4.1.0 特性解析之LIBC与POSIX
- [linux] 远程服务器安装unrar(无root)
- 控制输入框弹出弹窗 和不弹出窗口