antd|antd table长表格出现滚动条的操作方法 antdtable长表格出现滚动条的操

文章图片

【antd|antd table长表格出现滚动条的操作方法】如图想实现如上图所示，看antd table官方文档想实现这个，介绍的很不详细，实现起来一堆坑。
阿里云页面的这种表格，拉伸起来也有很多bug，也不知道他的实现方法如何，我这边介绍一种方法实现如下，遇到拉伸也不怕…

record.id":pagination="pagination":scroll="{ x: '1400px' | true }"class="charge-table"@change="handleTableChange">{{ text }}小时

.content {flex: 1; background: #ffffff; border-radius: 8px; padding: 0 20px; position: relative; }/deep/.ant-spin-nested-loading {position: absolute; left: 20px; right: 20px; }

重点在于css设置绝对定位，columns每一项都要设置width，且width必须为固定px，不能是百分比（%），不然拉伸会被隐藏，至于单元格里面是否折行无所谓，刚开始就是在这里踩了很多坑

const columns = [{title: '编号',dataIndex: 'id',// width: '3.4%',width: '58px'},{title: '用户平台名',dataIndex: 'ourUserName',// width: '6.9%',width: '173px'},{title: '用户外部名',dataIndex: 'userName',// scopedSlots: { customRender: 'userName' },//width: '166px'// width: '6.9%',width: '145px',ellipsis: true},{title: '用户组',dataIndex: 'groupDesc',// scopedSlots: { customRender: 'groupDesc' },// width: '10%',ellipsis: true,width: '198px'},{title: '用户组账户',dataIndex: 'groupName',// width: '8.4%',width: '145px'},{title: '余额(单位：核时)',dataIndex: 'corestimeBalance',// width: '7.9%',width: '129px'},{title: 'VPN地址',dataIndex: 'Address',scopedSlots: { customRender: 'Address' },// width: '13.2%',width: '217px'// ellipsis: true,// width: '246px'// customCell: () => {//return {//style: {//'min-width': '300px',//'white-space': 'nowrap',//'text-overflow': 'ellipsis'//}//}// }//customCell: () => {//return {//style: {//'color':'yellow',//'width': '246px'//}//}// },//customHeaderCell: () => {//return {//style: {//'color':'yellow',//'width': '246px'//}//}// }},{title: 'SSH地址',dataIndex: 'sshAddress',ellipsis: true,// width: '13.2%',width: '245px'},{title: '试用方式',dataIndex: 'trialMethod',ellipsis: true,// width: '7.8%',width: '128px'},{title: '试用额度',dataIndex: 'trialQuota',// width: '6.9%',width: '104px',scopedSlots: { customRender: 'trialQuota' }},{title: '集群操作',key: 'action',scopedSlots: { customRender: 'action' },fixed: 'right',width: '132px'}]

实现出来的效果如下：