介紹
vue-easytable是一個基于vue的可編輯表格開源組件哪自，功能強大毕贼，文檔完善翎迁。
github地址：https://github.com/huangshuwei/vue-easytable
文檔地址：http://doc.huangsw.com/vue-easytable/app.html#/intro
使用指導(dǎo)
- 創(chuàng)建vue工程：
vue init webpack vue-easytable-demo - 下載vue-easytable
npm install vue-easytable --save-dev - 在main.js中全局引入
import 'vue-easytable/libs/themes-base/index.css'
import {VTable, VPagination} from 'vue-easytable'
Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)
- 創(chuàng)建測試數(shù)據(jù)
先在src下創(chuàng)建mock文件夾滨砍，在下面創(chuàng)建文件tableData.js
export default [
{ 'id': '1', 'name': '小紅', 'age': '12', 'height': '112', 'sex': '女', 'score': '100' },
{ 'id': '2', 'name': '小麗', 'age': '12', 'height': '116', 'sex': '女', 'score': '99' },
{ 'id': '3', 'name': '小芳', 'age': '12', 'height': '113', 'sex': '女', 'score': '98' },
{ 'id': '4', 'name': '小華', 'age': '12', 'height': '130', 'sex': '男', 'score': '96' },
{ 'id': '5', 'name': '小聰', 'age': '12', 'height': '120', 'sex': '男', 'score': '93' },
{ 'id': '6', 'name': '小胖', 'age': '12', 'height': '118', 'sex': '男', 'score': '86' },
{ 'id': '7', 'name': '小明', 'age': '12', 'height': '121', 'sex': '男', 'score': '59' },
{ 'id': '8', 'name': '小飛', 'age': '12', 'height': '125', 'sex': '男', 'score': '92' },
{ 'id': '9', 'name': '小環(huán)', 'age': '12', 'height': '120', 'sex': '女', 'score': '93' },
{ 'id': '10', 'name': '小義', 'age': '12', 'height': '116', 'sex': '男', 'score': '79' },
{ 'id': '11', 'name': '小白', 'age': '12', 'height': '116', 'sex': '男', 'score': '81' },
{ 'id': '12', 'name': '小黑', 'age': '12', 'height': '118', 'sex': '男', 'score': '88' },
{ 'id': '13', 'name': '小海', 'age': '12', 'height': '125', 'sex': '男', 'score': '83' },
{ 'id': '14', 'name': '小金', 'age': '12', 'height': '129', 'sex': '男', 'score': '82' },
{ 'id': '15', 'name': '小路', 'age': '12', 'height': '127', 'sex': '女', 'score': '72' },
{ 'id': '16', 'name': '小龍', 'age': '12', 'height': '125', 'sex': '男', 'score': '96' },
{ 'id': '17', 'name': '小藍', 'age': '12', 'height': '118', 'sex': '女', 'score': '93' },
{ 'id': '18', 'name': '小蘭', 'age': '12', 'height': '124', 'sex': '女', 'score': '71' },
{ 'id': '19', 'name': '小高', 'age': '12', 'height': '116', 'sex': '女', 'score': '79' },
{ 'id': '20', 'name': '小國', 'age': '12', 'height': '130', 'sex': '男', 'score': '68' }
]
- 創(chuàng)建展示文件TablePage.vue(放置在conponents目錄下)
<template>
<div class="tablePage">
<h1>表格+分頁</h1>
<!-- 表格-->
<v-table
:columns="tableConfig.columns"
:table-data="tableConfig.tableData"
:paging-index="(pageIndex-1)*pageSize"
></v-table>
<!-- 分頁-->
<v-pagination
@page-change="pageChange"
@page-size-change="pageSizeChange"
:total="total"
:page-size="pageSize"
:layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
></v-pagination>
</div>
</template>
<script>
import tableDate from '../mock/tableData.js'
export default {
data () {
return {
pageIndex: 1,
pageSize: 10,
total: '',
tableConfig: {
tableData: [],
columns: [
{
field: 'id',
title: '編號',
width: 50,
columnAlign: 'center'
},
{
field: 'name',
title: '姓名',
width: 120,
columnAlign: 'center'
},
{
field: 'age',
title: '年齡',
width: 50,
columnAlign: 'center'
},
{
field: 'height',
title: '身高',
width: 100,
columnAlign: 'left'
},
{
field: 'sex',
title: '性別',
width: 50,
columnAlign: 'center'
},
{
field: 'score',
title: '成績',
width: 80,
columnAlign: 'center'
}
]
}
}
},
created () {
this.getTableData()
},
methods: {
getTableData () {
this.tableConfig.tableData = tableDate.slice(
(this.pageIndex - 1) * this.pageSize,
this.pageIndex * this.pageSize
)
this.total = tableDate.length
},
pageChange (pageIndex) {
this.pageIndex = pageIndex
this.getTableData()
console.log(pageIndex)
},
pageSizeChange (pageSize) {
this.pageIndex = 1
this.pageSize = pageSize
this.getTableData()
}
}
}
</script>
- 運行：npm run dev
- 效果圖（界面訪問http://localhost:8080/#/）：
- 打包（用于發(fā)布）：npm run build
生成文件在根目錄下的dist目錄下忌卤。 - demo源代碼
https://gitee.com/cxyzy1/vue-easytable
附錄
- vue-easytable源代碼：https://github.com/huangshuwei/vue-easytable
- vue進階之vue-easytable實現(xiàn)前端的表格+分頁 https://blog.csdn.net/youyanh/article/details/81501971
- 使用嚴(yán)格模式eslint時，報錯Missing space before function parentheses的問題 http://www.reibang.com/p/2f5cded8a2d3
