BootPage
组件介绍
一款支持静态数据和服务器数据的表格分页组件，支持调整每页显示行数和页码显示个数，样式基于bootstrap
注：在使用ES6及vue-loader的vue项目中才能使用本组件，请求本地json文件数据可能会失败，请使用服务器端数据测试
在线演示：https://luozhihao.github.io/BootPage/index.html
如何使用
HTML文档:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th width="10%">id</th>
<th width="30%">name</th>
<th width="40%">content</th>
<th width="20%">remark</th>
</tr>
</thead>
<tbody>
<tr v-for="data in tableList">
<td v-text="data.num"></td>
<td v-text="data.author"></td>
<td v-text="data.contents"></td>
<td v-text="data.remark"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="pull-left">
<button class="btn btn-default" v-on:click="refresh">刷新</button>
</div>
<div class="pull-right">
<boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen" :param="param"></boot-page>
</div>
</td>
</tr>
</tfoot>
</table>使用静态数据javascript:
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
lists: [
{num: 1, author: 'luozh', contents: 'BootPage是一款支持静态数据和服务器数据的表格分页组件', remark: 'dsds'},
{num: 2, author: 'luozh', contents: '支持调整每页显示行数和页码显示个数，样式基于bootstrap', remark: 'dsds'},
{num: 3, author: 'luozh', contents: '<boot-page>标签中async指是否从服务器端获取数据，false为否', remark: 'dsds'},
{num: 4, author: 'luozh', contents: 'data为静态的表格数据数组；', remark: 'dsds'},
{num: 5, author: 'luozh', contents: 'lens为每页显示行数的数组', remark: 'dsds'},
{num: 6, author: 'luozh', contents: 'page-len为可显示的页码数', remark: 'dsds'},
{num: 7, author: 'luozh', contents: '服务器回传参数为{data:[], page_num: 6}, 其中data为表格数据，page_num为总页数', remark: 'dsds'},
{num: 8, author: 'luozh', contents: '可以调用this.$refs.page.refresh()刷新表格数据', remark: 'dsds'}
], // 表格原始数据，使用服务器数据时无需使用
tableList: [] // 分页组件传回的分页后数据
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据
'data' (data) {
this.tableList = data
}
}
}
</script>使用服务器数据的组件HTML:
<boot-page v-ref:page :async="true" :lens="lenArr" :url="url" :page-len="pageLen" :param="param"></boot-page>使用服务器数据javascript:
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
url: '/bootpage/', // 请求路径
param: {}, // 向服务器传递参数
tableList: [] // 分页组件传回的分页后数据
}
},
methods: {
refresh () {
this.$refs.page.refresh() // 这里提供了一个表格刷新功能
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据（这里即为服务器传回的数据）
'data' (data) {
this.tableList = data
},
// 刷新数据
'refresh' () {
this.refresh()
}
}
}
</script>组件自带向服务器传递的参数为:
{
active: 1, // 当前页码
length: 5 // 每页显示个数
}服务器回传的参数需为:
{
data: [], // 表格数据
page_num: 5 // 总页数
}使用时需要引入bootstrap, 所有代码及demo都在本项目中，请下载后在BootPage目录运行：
npm install
npm run dev