antdvue表格加分页

<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;">行业识别分类：</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></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;">导入数量：</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="数据加载中..."><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>无权限，请联系管理员</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: "互联网",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: "行业类型",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, // 默认当前页数defaultPageSize: 20, // 默认当前页显示数据的大小showSizeChanger: true,total: "",// showQuickJumper: true,pageSizeOptions: ["20", "40", "100"],showTotal: total => `共 ${total} 条`, // 显示总数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()  //显示列表的接口名称},// 改变每页数量时更新显示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表格加分页相关推荐

layui数据表格数据绑定加分页代码
layui数据表格数据绑定加分页代码最近使用layui数据表格感觉特别方便,一段代码直接绑定数据加上分页加载数据直接上代码 layui.use(['table', 'laypage'], func ...
表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口
不知道UI抽什么风,所有列表都没用分页器,一律采用滚动加载.但我又是个懒蛋,不想手写所以就用了element-plus的无限滚动,但是v-infinite-scroll和el-table这俩搁一块就有 ...
计算机如何分页打印,[计算机]Excel表格如何分页打印、自动分页、取消分页等技巧.doc...
[计算机]Excel表格如何分页打印.自动分页.取消分页等技巧.doc 上传人:max****ui 文档编号:13468786 上传时间:2019-01-18 格式:DOC 页数:5 大小:334.1 ...
elementui table表格跨分页多选
elementui table表格跨分页多选项目中遇到的表格多选加分页,要获取选中的数据,使用elementui的表格开发,刚开始思路是: 1.创建一个数组,使它每项为一页所选择的选择项数据数组.选 ...
[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号
目录文章较长,请点击书签浏览感兴趣的内容. CSDN的渲染与Typora未必一致,下面所有功能都在Typora上测试成功. 文章目录前言全局设置效果类修改字体.颜色.字体大小.行高等文字居 ...
html5怎么给表格设置分页,如何让HTML5的表格支持后台排序与分页
如何让HTML5的表格支持后台排序与分页 TWaver HTML5发布已有一段时间,使用的客户也是逐渐增加,于是我也迫不及待地申请了一个试用版来写一个小网页,最近正在写到数据查询,表格显示的功能.表格 ...
springboot整合layui实现数据表格的分页操作
第一步,引入依赖文件 <link rel="stylesheet" href="./layui/css/layui.css"> <script ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
ANSYS - 表格加载方法
1. 假设通过数值模拟或根据相关函数计算得到了荷载数据的EXCEL文件,如下图所示. 2. 将荷载文件复制粘贴到TXT文件,如下图所示,TXT文件命名为FORCELOAD.TXT,并将该文件放在ANS ...

antdvue表格加分页

antdvue表格加分页相关推荐

最新文章

热门文章