首页 > 其他分享 >使用antd的ProTable表格,打印时表头不全

使用antd的ProTable表格,打印时表头不全

时间:2024-12-04 10:44:52浏览次数:4  
标签:表格 colgroup 打印 表头 ProTable antd

问题

项目中使用antd的ProTable表格,在打印时发现表头不全,如下图:

表格有5列,但表头只展示了3列,审查元素发现table下有个colgroup来控制表头宽度

解决

修改代码:
在打印时隐藏colgroup即可

@media print {
  colgroup {
    display: none;
  }
}

实现效果如下:

标签:表格,colgroup,打印,表头,ProTable,antd
From: https://www.cnblogs.com/ZerlinM/p/18585792

相关文章

  • [React]antd表单校验函数写法
    来自文心一言通过 rules 属性来定义校验规则,其中可以包含自定义的校验函数 validatorimportReactfrom'react';import{Form,Input,Button}from'antd';constMyForm=()=>{const[form]=Form.useForm();//自定义校验函数constcheckUsername=(......
  • 记录Vue Antd 表格RowSelection刷新列表后缓存问题
    起因 原来的代码//tsx部分<BaseTableoptions={tableData.options}columns={tableData.columns}data={tableData.data}/>constselectKeys=ref<string[]>([])//表格配置consthandleRowSelection={......
  • AntDesign - Vue Table组件 实现动态表格、列宽计算(方式二)
    朋友们,按照上文(方式一)思路,实现了动态表格和表头分组,这篇按照方式一的需求,扩展出另一种代码写法;一、表格头表格columns还是定义在data(){}中,初始化静态列数组,配置项列由后端接口返回(第二点写动态配置项代码);在方式一基础上加了筛选菜单功能,因此变化代码部分如下......
  • AntDesign - Vue Table组件 实现动态表格、表头分组的功能(方式一)
     一、功能分析产品经理要求企微主体名称是配置项且后期可修改或增加,各企微主体账号的数据一对应。前端开发设计方案为:静态列(左部分)在前端写,配置项由后端接口返回,再动态追加到columns中,根据表头dataIndex对应的数据项,填充到数据数组dataSource。至此,开发思路出来......
  • C#Npoi实现DataTable数据导出到Excel支持多表头
    至于Npoi的引用就省略了1.相关类的代码usingSystem;usingSystem.Collections.Generic;usingSystem.Data;usingSystem.IO;usingSystem.Linq;usingNPOI.SS.UserModel;usingNPOI.XSSF.UserModel;usingNPOI.HSSF.UserModel;usingNPOI.SS.Util;///<summary>//......
  • ProTable 如何做到下拉滚动加载数据
    1、这里主要是什么呢这里的关键是$('.ant-table-body').on('scroll',handleScrollEvent);监听滚动条事件。1、然后再reuqest里面设置,是因为ProTable点击查询时,会进到这里。2、监听page,是当滚动导致页数,发生变化时,重新加载数据!importReact,{useRef,useEffect,useState......
  • el-table自定义表头新
    <el-table-columnprop="address"label="333333"min-width="180":show-overflow-tooltip="true"><templateslot......
  • AntDesign树形组件tree和输入input组件融合使用
    <a-tree :tree-data="selectItem.options.options" :replace-fields="{ children:'children', title:'label', code:'code' }" >......
  • Antd4X Form.List嵌入Table 表格项数据联动
    antd4X版本父组件是Form组件,其中一项为Form.List,Form.List内嵌了一个Tableconstform=Form.useForm()<Formform={form}><Form.List>{(fields,operate,{errors})=>{return(<TableclassName="wf-subform"......
  • 比较好用的调节Table表格的表头和内容的宽度的方法
    因为大部分的Table组件的表头宽度不太适合我们所使用的,我们可以通过封装函数来适应表头的宽度。getColumnWidth(label,prop,tableData){   //label表头名称   //prop对应的内容   //tableData表格数据   constminWidth=150;//最小宽度......