本节我们将通过easytable显示数据。
1、前提约束
完成nodejs,vue-cli,webpack,webpack-dev-server的安装
https://www.jianshu.com/p/eb4d9e132f62
2、操作步骤
- 使用脚手架创建一个vue项目模板并启动成功,假设项目名称为vue-easytable
https://www.jianshu.com/p/644eb12a8174 - 下载easytable的js包
cd vue-easytable
cnpm 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)
- 在src文件夹下创建mock文件夹,在mock文件夹下创建table.js
export default [
{ 'id': '1', 'name': 'xiaoli' },
{ 'id': '2', 'name': 'jiangsu' },
{ 'id': '3', 'name': 'ali' },
{ 'id': '4', 'name': 'zhangli' },
{ 'id': '5', 'name': 'wanhe' },
]
- 修改HelloWorld.vue
<template>
<div class="tablePage">
<h1>表格+分页</h1>
<!-- 表格-->
<v-table
:columns="tableConfig.columns"
:table-data="tableConfig.tableData"
:paging-index="(pageIndex-1)*pageSize"
></v-table>
<!-- 分页-->
</div>
</template>
<script>
import tableData from '../mock/table.js'
export default {
name: 'db',
data () {
return {
pageIndex: 1,
pageSize: 10,
total: '',
tableConfig: {
tableData: [],
columns: [
{
field: 'id',
title: '编号',
width: 50,
columnAlign: 'center'
},
{
field: 'name',
title: '姓名',
width: 120,
columnAlign: 'center'
}
]
}
}
},
created () {
this.getTableData()
},
methods: {
query () {
this.tableConfig.tableData = tableData;
}
},
mounted () {
this.query()
}
}
</script>
- 编译和启动
npm run build
npm run dev
访问提示的url,便能看到显示的表格【笔者没有关注居中】:
以上就是在vue项目中通过easytable显示数据的过程。