Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

网友投稿 422 2023-02-25


Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

2017年底了,总结了这一年多来的前端之路,vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5。结合公司的一些实际项目,也封装了一些比较实用的组件。

由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码。

2、实现思路

2.1、Element UI 引入(整体引入)

main.js

// Element UI

import Element from 'element-ui'

// 默认样式

import 'element-ui/lib/theme-chalk/index.css'

2.2、开始封装 iTable.vue 组件 (骨架)

由于公司项目都是以 i 开头,所以,为了区分组件和页面,习惯于组件命名也以 i 开头。 首先把 Table 、 Pagination 组件加进来

养成写注释的好习惯,个人项目的注释量基本上不会低于 30%

2.3、在页面中引用 iTable 组件,并且给 iTable 组件传值

:total="total"

:otherHeight="otherHeight"

@handleSizeChange="handleSizeChange"

@handleIndexChange="handleIndexChange" @handleSelectionChange="handleSelectionChange"

:options="options"

:columns="columns"

:operates="operates"

@handleFilter="handleFilter"

@handelAction="handelAction">

:total="total"

:otherHeight="otherHeight"

@handleSizeChange="handleSizeChange"

@handleIndexChange="handleIndexChange" @handleSelectionChange="handleSelectionChange"

:options="options"

:columns="columns"

:operates="operates"

@handleFilter="handleFilter"

@handelAction="handelAction">

除了 columns 参数和 operates 参数 之外,其它的参数应该还好理解,好的。那我们就详细的解释下这两个参数,那么我们就需要结合组件iTable.vue 来讲解了,接下来就给 iTable.vue 添加肌肉和血管,代码都贴了。 比较难理解的就是columns里面的 render 参数,使用了Vue的虚拟标签,为了就是能够在 table 表格的列中随心所欲的使用各种html标签 和 element UI 的其他组件。( 你也可以直接写,看看 table 组件是否能识别,呵呵哒! )这个估计对于刚入门的小伙伴是一个比较难理解的地方,详细的大家可以先看下vue 的render,解释的更清楚,如果有的小伙伴不理解,可以直接私信我~~~

ref="mutipleTable"

@selection-change="handleSelectionChange">

:label="column.label"

:align="column.align"

:width="column.width">

{{scope.row[column.prop]}}

v-if="operates.list.filter(_x=>_x.show === true).length > 0">

:plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}

ref="mutipleTable"

@selection-change="handleSelectionChange">

:label="column.label"

:align="column.align"

:width="column.width">

{{scope.row[column.prop]}}

:label="column.label"

:align="column.align"

:width="column.width">

{{scope.row[column.prop]}}

v-if="operates.list.filter(_x=>_x.show === true).length > 0">

:plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}

v-if="operates.list.filter(_x=>_x.show === true).length > 0">

:plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}

:plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}

@current-change="handleIndexChange"

:page-size="pageSize"

:page-sizes="[10, 20, 50]" :current-page="pageIndex" layout="total,sizes, prev, pager, next,jumper"

:total="total">

@current-change="handleIndexChange"

:page-size="pageSize"

:page-sizes="[10, 20, 50]" :current-page="pageIndex" layout="total,sizes, prev, pager, next,jumper"

:total="total">

筛选过滤

表格操作

总结

以上所述是给大家介绍的Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:从零开始最小实现react服务器渲染详解
下一篇:Java Swing组件定制RadioButton示例
相关文章

 发表评论

暂时没有评论,来抢沙发吧~