Package Exports
- vue-table-pagination
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-table-pagination) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vue-table-pagination
vue2封装的table联动组件
Live Demo
vue-table-pagination-demo Site
Install with npm
Installing
npm install --save vue-table-pagination
Import
import Vue from 'vue';
import VueTablePagination from 'vue-table-pagination';
Vue.use(VueTablePagination);西门互联分页组件
可自定义配置和分页可fork自行修改
<vue-table-pagination
@gmChangePageButton="gmChangePageButton"
@gmChagePageSize="gmChagePageSize"
:gmCurrentPage="page"
:gmTotalPage="totalPage"
:gmCanJump="true"
:gmCanChoose="true"
:gmTableLists="gmTableLists"
:gmTableThLists="gmTableThLists"
:gmIsIndex="true"
@gmPerEmitClick="gmPerEmitClick"
:gmTableWidth="0"
:gmTimeStampType="63"
></vue-table-pagination>
gmChangePageButton -- 按钮改变分页
gmChagePageSize --每页显示多少条
page -- 当前高亮锚点
totalPage -- 总页数
gmCanJump --是否跳转
gmCanChoose -- 是否改变分页条数
gmTableLists --tbody数据
gmTableThLists --theader数据
gmIsIndex --开启索引
gmPerEmitClick --table中的按钮操作
gmTableWidth --table宽度
gmTimeStampType --时间参数效果图截图
演示test.vue
<template>
<div class="page-view">
<div class="page-content">
<!-- 通用table组件 -->
<!--用法 -->
<vue-table-pagination
@gmChangePageButton="gmChangePageButton"
@gmChagePageSize="gmChagePageSize"
:gmCurrentPage="page"
:gmTotalPage="totalPage"
:gmCanJump="true"
:gmCanChoose="true"
:gmTableLists="gmTableLists"
:gmTableThLists="gmTableThLists"
:gmIsIndex="true"
@gmPerEmitClick="gmPerEmitClick"
:gmTableWidth="0"
:gmTimeStampType="63"
></vue-table-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'test',
data(){
return {
page:1,
pageSize:10,
totalPage:100,
//修改为value对象下面值取
gmTableLists:[
{
"game_uuid": {
"value": 14
},
"title": {
"value": "标题1"
},
"content": {
"value": "这是标题1的所有内容内容这是标题1的所有内容内容"
},
"attachment": {
"value": [
{
"props": "晶能id",
"number": "10"
}, {
"props": "皮肤id",
"number": "10"
}
]
},
"receiver": {
"value": ["张三", "李四", "王麻子", "小红"]
},
"sendtime": {
"value": 1515772800
},
"create_user": {
"value": "超级管理员1"
},
"create_time": {
"value": 1515828493
},
"update_user": {
"value": "admin"
},
"update_time": {
"value": '1515828493'
},
"operate": {
"value": [
{
"game_uuid": 14,
"action": "pk_id"
}, {
"button_name": "编辑",
"action": "edit"
}, {
"button_name": "删除",
"action": "delte"
}
]
}
},
{
"game_uuid": {
"value": 15
},
"title": {
"value": "标题2"
},
"content": {
"value": "这是标题2的所有内容内容这是标题1的所有内容内容"
},
"attachment": {
"value": [{
"props": "晶能id",
"number": "11"
}, {
"props": "皮肤id",
"number": "12"
}]
},
"receiver": {
"value": ["小米", "小明"]
},
"sendtime": {
"value": 1515772800
},
"create_user": {
"value": "超级管理员2"
},
"create_time": {
"value": 1515828093
},
"update_user": {
"value": "jackieli"
},
"update_time": {
"value": ''
},
"operate": {
"value": [
{
"game_uuid": 15,
"action": "pk_id"
}, {
"button_name": "编辑",
"action": "edit"
}, {
"button_name": "删除",
"action": "delte"
}
]
}
}
],
//接口先获取这个表头字段对应 "fields"://表单字段列表 button 操作
//然后在获取gmTableLists
//每个用户看到的字段格式都不一样（权限可设置）
gmTableThLists:{
"game_uuid":"流水号",
"title":"标题",
"content":"内容预览",
"attachment":"邮件奖励",
"receiver":"收件人/人数",
"sendtime":"发送时间",
"create_user":"创建者",
"create_time":"创建时间",
"update_user":"审核人",
"update_time":"审核时间"
}
}
},
methods: {
//循环事件派发
gmPerEmitClick(list,index,type){
console.log("格式化后的当前列数据",list);
let game_uuid = list.game_uuid.value
//通过this.gmTableLists[index]的数据来判断每列操作的button的事件
console.log("通过index参数获取原始数据的操作当前列",this.gmTableLists[index])
// console.log("商品id:"+id+"---事件:"+type)
console.log("流水号:"+game_uuid+"---对外index:"+index+"--对外事件类型"+type)
//this.$router.replace('/')
},
gmChagePageSize(data){
this.page = 1
this.pageSize = data
console.log(data)
},
//分页组件传递事件ajax
gmChangePageButton(page){
this.page = page
console.log(page)
}
}
};
</script>
<style lang="css">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
color: #2c3e50;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
* > input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset !important; /*关于解决输入框背景颜色*/
-webkit-text-fill-color: #000000!important;
}
html,
body {
font-family: "Microsoft YaHei";
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
background: #fff;
padding: 0 10px;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
ol,
ul,
li {
list-style: none;
}
img {
border: 0 none;
}
a {
text-decoration: none;
}
a,
input,
textarea {
outline: none;
}
input::-ms-clear,
input::-ms-reveal {
display: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
clear: both;
content: '';
display: block;
height: 0;
visibility: hidden;
}
.hide {
display: none !important;
}
.show {
display: block;
}
.fl {
float: left;
}
.fr {
float: right
}
</style>