(1) 创建 common-table.vue
<style lang="less">
@import '../../styles/common.less';
@import './components/table.less';
</style>
<template>
<div>
<Table :columns="historyColumns" :data="historyData"></Table>
<Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage"></Page>
</div>
</template>
<script>
import {globalhttp} from '../Global/global';
import axios from 'axios'
export default {
name: 'common-table',
data () {
return {
ajaxHistoryData:[],
// 初始化信息总条数
dataCount:0,
// 每页显示多少条
pageSize:10,
historyColumns: [
{
title: 'id',
key: 'id'
},
{
title: '姓名',
key: 'realName'
},
{
title: '手机号',
key: 'phone'
},
{
title: '内容',
key: 'content'
}
],
historyData: []
}
},
methods:{
// 获取历史记录信息
getdata(params){
let this1 = this;
axios.get(globalhttp.pc_getTopicMomentsInfo,{
params: params,
})
.then(resp => {
//alert(JSON.stringify(resp));
//console.log(JSON.stringify(resp));
//alert(JSON.stringify(resp.data.status));
if(resp.data.status === 1)
{
//debugger
this1.ajaxHistoryData = resp.data.list;
this1.dataCount = resp.data.all_count;
this.historyData = this1.ajaxHistoryData;
}
}).catch(err => { //
});
},
handleListApproveHistory(){
this.getdata({'title': '','page': 0,'limit': 10});
},
changepage(index){
this.getdata({'title': '','page': index,'limit': 10});
}
},
created(){
this.handleListApproveHistory();
}
}
</script>
(2) 配置路由
path: '/tables',
icon: 'ios-grid-view',
name: 'tables',
title: '表格',
component: Main,
children: [
{ path: 'dragableTable', title: '可拖拽排序', name: 'dragable-table', icon: 'arrow-move', component: resolve => { require(['@/views/tables/dragable-table.vue'], resolve); } },
{ path: 'editableTable', title: '可编辑表格', name: 'editable-table', icon: 'edit', component: resolve => { require(['@/views/tables/editable-table.vue'], resolve); } },
{ path: 'searchableTable', title: '可搜索表格', name: 'searchable-table', icon: 'search', component: resolve => { require(['@/views/tables/searchable-table.vue'], resolve); } },
{ path: 'exportableTable', title: '表格导出数据', name: 'exportable-table', icon: 'code-download', component: resolve => { require(['@/views/tables/exportable-table.vue'], resolve); } },
{ path: 'table2image', title: '表格转图片', name: 'table-to-image', icon: 'images', component: resolve => { require(['@/views/tables/table-to-image.vue'], resolve); } },
{ path: 'commontable', title: '表格转图片', name: 'common-table', icon: 'images', component: resolve => { require(['@/views/tables/common-table.vue'], resolve); } }
]
(3) 查看效果