Ant Design Vue表格序号递增问题
render函数进行递增的时候是不支持跨页递增的,如果我们想要跨页递增是需要做的配置的,不过也很简单,下面看代码
1、columns属性配置
{title: '序号',dataIndex: 'num', key: 'num',width:80,scopedSlots: { customRender: 'num' },fixed: 'left'},
2、pagination分页设置
pagination: {total: 0,pageSize: 10,showTotal: (total) => {if (this.total) {return `共${this.total}条`}return `共${total}条`},defaultCurrent: 1,current: 1,pageSizeOptions: ['11', '21', '31', '51', '101', '201'],showQuickJumper: true,showSizeChanger: true,onShowSizeChange: (current, size) => {const pager = { ...this.pagination }pager.current = currentpager.pageSize = sizethis.pagination = pagerthis.cur_index = 0this.search()},buildOptionText: (size) => {return new Number(size.value) - 1 + '条/页'},},
3、table标签
<a-table:scroll="{ x: 1500 }"ref="table":columns="billColumns":rowKey="(row) => row.orderNo":dataSource="billTableList"bordered@change="handleTableChange":customRow="rowClick":rowClassName="rowClassName":pagination="false"
><span slot="num" slot-scope="text, record, index">{{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}</span>
</a-table>
这样就完成了,下面看效果
因为我在项目中是添加了一个合计行的,这个时候序号把合计行也带上了,这样是不对的,修改代码如下
<a-table:scroll="{ x: 1500 }"ref="table":columns="billColumns":rowKey="(row) => row.orderNo":dataSource="billTableList"bordered@change="handleTableChange":customRow="rowClick":rowClassName="rowClassName":pagination="false"
><template slot="num" slot-scope="text, record, index"><!-- 有orderNo的代表不是合计行,我们这里只展示带订单号的 --><span v-if="record.orderNo">{{(pagination.current - 1) * (pagination.pageSize - 1) + parseInt(index) + 1}}</span></template>
</a-table>
看效果,合计行不计入序号啦
Ant Design Vue表格序号递增问题相关推荐
- Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析 在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
- ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示 原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
- Ant Design Vue 表格内编辑(附完整源码及效果图)
效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: {customRender: '' } 实现完整代码: <template& ...
- ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...
- Ant Design vue a-table 序号自动生成
// 在 column 里面生成 //序号自动生成{title: '序号',dataIndex: 'index',customRender: ({ index }: { index: number } ...
- Ant Design Vue 表格数据按树型展示
/*** 使用递归将数组转为树形结构* 父ID属性为parent*/public static array2Tree (array: any, parentId: number) {if (Tool. ...
- ant design vue表格列表时间戳转时间
import moment from 'moment' tableHeader: [{dataIndex: 'purchaseVoucherDate',title: '凭证日期', //'凭证日期', ...
- ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色 一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
- vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用 场景复现 实际操作 解决a-table表格padding过宽 知识调用 文章中可能会 ...
- ant design vue 当中的表格自定义结构超出隐藏的自适应 动态显示省略号
前言 我们知道,在ant design vue当中的table组件里面的列表项目,我们一般会使用columns属性定义列表项目,比如下面 export const columns = [{title: ...
最新文章
- 玩了一个人脸识别登录
- 全球最大的公开人脸数据集 | 清华大学芯翌科技联合发布
- 使用keepalived加lvs做负载均衡,访问后端的服务器,2分钟后超时,需要重新登录...
- 大公司青睐的50款开源工具
- java final的内存_Java并发编程之final域的内存语义
- MySQL入门 (四) : JOIN 与UNION 查询
- 有关计算机编程论文,有关计算机程序的论文范文
- prince2证书有含金量吗?
- Java中的注解是什么意思,有什么用
- 身份证号码 如何把格式设置成18个格子
- python 日本 地图 热力图_python 在百度地图上画热力图
- 超鸿蒙 混希夷 寂寥,下列句子与“故凡为愚者.莫我若也 的句式不同的一项是 A.超鸿蒙.混希夷.寂寥而莫我知也 B.而良人未之知也 C.及长.不省所怙.惟兄嫂是依 D.王语暴以好乐...
- 计算机系23班趣味口号,23班口号怎么写
- python视频转字符动画_python字符动画
- 解决everything只能搜索C盘的问题
- 阿里P8面试官总结的《2021最新java面试题》,搞定90%以上的技术面
- Excel 给一列数据前批量添加字符
- CentOS7 搭建虚拟主机
- 世界《模拟电路》四大名著,传说中的圣经,经典中的经典。
- java购物平台-项目模板-毕业设计