iview-admin 之 table 動態表分頁查詢
阿新 • • 發佈:2018-12-29
(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) 檢視效果