<template><div class="page"><divv-if="hasPermissions == true"style="width:100%;height:calc(100% - 50px)"><div class="interface-head">人工質檢</div><div class="page-box"><divclass="clear search-condition-box"style="margin-left:20px;margin-top:30px;"><divclass="search-condition-box-item"style="width: 70px;line-height:30px;">注冊年限：</div><div class="search-condition-box-item" style="width: 170px"><a-selectv-model="searchList.year"style="width: 130px;float:left;display: inline-block;margin-left: -10px;"allowClearplaceholder="選擇年限"><a-select-optionv-for="(item, index) in yearList":key="index":value="item.productkey":title="item.productName">{{ item.productName }}</a-select-option></a-select></div><divclass="search-condition-box-item"style="width: 100px;line-height:30px;">行業(yè)識別分類：</div><div class="search-condition-box-item" style="width: 170px"><a-selectv-model="searchList.year"style="width: 130px;float:left;display: inline-block;margin-left: -10px;"allowClearplaceholder="選擇年限"><a-select-optionv-for="(item, index) in yearList":key="index":value="item.productkey":title="item.productName">{{ item.productName }}</a-select-option></a-select></div><divclass="search-condition-box-item"style="width: 100px;line-height:30px;">坐席開戶數(shù)量：</div><div class="search-condition-box-item" style="width: 170px"><a-selectv-model="searchList.year"style="width: 130px;float:left;display: inline-block;margin-left: -10px;"allowClearplaceholder="選擇年限"><a-select-optionv-for="(item, index) in yearList":key="index":value="item.productkey":title="item.productName">{{ item.productName }}</a-select-option></a-select></div></div><divclass="clear search-condition-box"style="margin-left:20px;margin-top:10px;"><divclass="search-condition-box-item"style="width: 70px;line-height:30px;">是否測試：</div><div class="search-condition-box-item" style="width: 170px"><a-selectv-model="searchList.year"style="width: 130px;float:left;display: inline-block;margin-left: -10px;"allowClearplaceholder="選擇年限"><a-select-optionv-for="(item, index) in yearList":key="index":value="item.productkey":title="item.productName">{{ item.productName }}</a-select-option></a-select></div><divclass="search-condition-box-item"style="width: 100px;line-height:30px;">有無對話：</div><div class="search-condition-box-item" style="width: 170px"><a-selectv-model="searchList.year"style="width: 130px;float:left;display: inline-block;margin-left: -10px;"allowClearplaceholder="選擇年限"><a-select-optionv-for="(item, index) in yearList":key="index":value="item.productkey":title="item.productName">{{ item.productName }}</a-select-option></a-select></div><divclass="search-condition-box-item"style="width: 100px;line-height:30px;">導入數(shù)量：</div><div class="search-condition-box-item" style="width: 140px"><a-selectv-model="searchList.year"style="width: 130px;float:left;display: inline-block;margin-left: -10px;"allowClearplaceholder="選擇年限"><a-select-optionv-for="(item, index) in yearList":key="index":value="item.productkey":title="item.productName">{{ item.productName }}</a-select-option></a-select></div><div class="search-condition-box-item" style="width: 80px"><a-button type="primary">導入</a-button></div><divclass="search-condition-box-item"style="width: 140px;margin-top:10px;"><a style="color:#218BFC">重置導入條件</a></div></div><!-- 列表展示 --><div class="form-box" style="height:calc(100vh - 300px)"><a-spin :spinning="table_spinning" tip="數(shù)據(jù)加載中..."><a-tablerowKey="num":pagination="pagination":columns="columns":locale="locale":dataSource="data":scroll="{ x: gettablewidth(), y: gettableheight() }"><span slot="exit" slot-scope="index, text"><a @click="tozhi(text.id)">質檢</a></span></a-table></a-spin></div></div></div><div v-else class="no-permission" style="height:calc(100% - 50px)"><span>無權限，請聯(lián)系管理員</span></div></div> </template><script> export default {components: {},data() {return {table_spinning: false,hasPermissions: true,searchList: {year: ""},yearList: [{productkey: 1,productName: "一年以下"},{productkey: 2,productName: "一到三年"},{productkey: 3,productName: "三年以上"}],data: [{id: 1,num: 1,companyName: "浙江快服",account: "愿得一心人",companyWeb: "互聯(lián)網(wǎng)",registerTime: "2002-10-05"}],locale: {},columns: [{title: "序號",dataIndex: "num",key: "num",width: 50},{title: "公司名稱",dataIndex: "companyName",key: "companyName",width: 150},{title: "賬號類型",dataIndex: "account",key: "account",width: 150},{title: "行業(yè)類型",dataIndex: "companyWeb",key: "companyWeb",width: 150},{title: "注冊時間",dataIndex: "registerTime",key: "registerTime",width: 150},{title: "操作",dataIndex: "exit",key: "exit",width: 150,scopedSlots: { customRender: "exit" }}],//分頁pagination: {current: 1,pageSize: 20,defaultCurrent: 1, // 默認當前頁數(shù)defaultPageSize: 20, // 默認當前頁顯示數(shù)據(jù)的大小showSizeChanger: true,total: "",// showQuickJumper: true,pageSizeOptions: ["20", "40", "100"],showTotal: total => `共 ${total} 條`, // 顯示總數(shù)onShowSizeChange: (current, pageSize) => {this.pagination.current = current;this.pagination.pageSize = pageSize;this.searchList.pageNum = current;this.searchList.pageSize = pageSize;var params = JSON.parse(JSON.stringify(this.searchList));params.pageNum = 1;params.pageSize = pageSize;// this.paramsCheck(params);// this.regUserList(params);// this.getList() //顯示列表的接口名稱},// 改變每頁數(shù)量時更新顯示onChange: (current, size) => {this.pagination.current = current;this.pagination.pageSize = size;this.searchList.pageNum = current;this.searchList.pageSize = size;var params = JSON.parse(JSON.stringify(this.searchList));params.pageNum = current;params.pageSize = size;// this.paramsCheck(params);// this.regUserList(params);// this.getList()} // 點擊頁碼事件}};},methods: {// 表格寬度gettablewidth() {let w = 0;for (let i of this.columns) {w = w + i.width;}return w;},// 表格高度gettableheight() {let height =window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight;return height - 250;},//去質檢結果頁面tozhi(id) {this.$router.push({name: "Inspectionresults",params: {id: id}});}},mounted() {document.title = "人工質檢";} }; </script><style scoped lang="scss"></style>

總結

以上是生活随笔為你收集整理的antdvue表格加分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。