elementUI-Table+Pagination实现的常见分页表格（附封装好的Vue组件代码）

element的Table组件可以很方便的展示对象数组数据，但是实际应用场景中的数组往往很长、不方便一口气全部展示出来。这时就需要同时使用Table和Pagination组件一起进行数据表的分页展示。
分页操作可以直接在后端拿取数据时进行、而且这样效率更高。但有些情况下就需要在前端组件里自己分页、比如：后端拿到的数据是二维数组、而要展示的数据表是里面那层。
本文介绍的例子是前端自己拿全部数据情况下的分页方法，后端分页时直接删去多余代码即可。

原创示例情景：数据为长度不定的对象数组，key为name、status；status需要根据值显示不同颜色。期望以每页5个的表格形式展示，要求表格写成一个数据自定义的vue组件。

表格组件 myTable.vue：

<template><div><el-table :data="showPage"tooltip-effect="light"border><el-table-column show-overflow-tooltip label="名称" min-width="40%"prop="name"></el-table-column><el-table-column show-overflow-tooltip label="状态" min-width="60%"><template slot-scope="scope"><span :style="{color:getColor(scope.row)}">{{scope.row.status}}</span></template></el-table-column></el-table><div><el-pagination@current-change="handlePageChange":current-page="currentPage":page-size="pageSize"layout="total, prev, pager, next":total=totalItem></el-pagination></div></div>
</template><script>export default {name: "myTable",created() {//该例中数据在父组件拿到后才展示该组件部分、故可以放在created()中。正常应在数据更新后进行下列操作this.totalItem = this.tableData.length;let wholeTable = this.cloneObj(this.tableData);//编写时不希望组件内加一些编辑操作就会影响父页面数据；没有这个顾虑的话也可直接赋值this.allPages = [];for (let i = 0; i < wholeTable.length; i += this.pageSize) {this.allPages.push(wholeTable.slice(i, i + this.pageSize));}if (this.allPages.length > 0) {this.showPage = this.allPages[0];}},props: {//父组件传过来的参数tableData: {type: Array,default: () => {return [];}},},data() {return {currentPage: 1,totalItem: 0,pageSize: 5,showPage: [],allPages: [],}},methods: {//由数据获取样式getColor(item) {let color = '#bbbbbb';switch (item.status) {case '红色':color = "#FF4949";break;case '蓝色':color = "#3A8DE3";break;default:color = '#bbbbbb';}return color;},//翻页操作handlePageChange(val) {this.currentPage = val;this.showPage = this.allPages[this.currentPage - 1];},//深度复制对象cloneObj(obj) {let newObj = {};if (typeof obj === 'object') {if (obj instanceof Array) {newObj = [];}for (var key in obj) {let val = obj[key];newObj[key] = (typeof val === 'object') ? this.cloneObj(val) : val;}return newObj;} else {return obj;}},}}
</script><style>
</style>

使用组件的父页面 test.vue

<template><div style="margin: 50px 100px;"><my-table :tableData="listData"></my-table></div>
</template><script>import myTable from "../../../public/components/component/myTable.vue";export default {name: "test",data() {return {listData: [{name: 1,status: '红色'},{name: 2,status: '蓝色'},{name: 3,status: '其他'},{name: 4,status: '红色'},{name: 5,status: '蓝色'},{name: 6,status: '其他'},{name: 7,status: '红色'}]}},components: {'my-table': myTable}}
</script><style>
</style>

效果：

elementUI-Table+Pagination实现的常见分页表格（附封装好的Vue组件代码）相关推荐

antd table排序会触发到分页怎么解决_多年管理系统开发经验总结~代码解决方案...
来源 | juejin.im/user/870468939940184 作者 | 前端小月月背景最近的你有没有接手的新项目,对这个有什么感觉?我最近接手了一个项目,先不论是否代码行数的多少,仅是思 ...
表格 + 分页 +表格上编辑
分装分页表格分页表格的封装代码截图实现的功能分页咋弄的 dataPacket是啥看下图表格编辑咋搞的我其实啥都不想写..图片贴上就完了↑↑↑ 你这个东西咋用呀效果展示一下吧---好的分 ...
vue组件封装——公用基础table组件
ui框架用的element-ui:vue版本为vue2(2.5.17) baseTable组件 table+pagination <template><div class=" ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
elementui table表格跨分页多选
elementui table表格跨分页多选项目中遇到的表格多选加分页,要获取选中的数据,使用elementui的表格开发,刚开始思路是: 1.创建一个数组,使它每项为一页所选择的选择项数据数组.选 ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
elementUI table表格合并相同的内容
elementUI table表格合并相同的内容 1.表格和数据表格是这样数据(由于数据太多,只展示了几个) tableData: [{one: '1 . 产出指标',two: '1 .1 数量指 ...
elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...

elementUI-Table+Pagination实现的常见分页表格（附封装好的Vue组件代码）

elementUI-Table+Pagination实现的常见分页表格（附封装好的Vue组件代码）相关推荐

最新文章

热门文章