antd table怎么实现长表格出现滚动条
短信预约 -IT技能 免费直播动态提醒
本篇内容主要讲解“antd table怎么实现长表格出现滚动条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“antd table怎么实现长表格出现滚动条”吧!
代码如下：
<div class="content"> <a-table :columns="columns" :data-source="dataSource" :row-key="record => record.id" :pagination="pagination" :scroll="{ x: '1400px' | true }" class="charge-table" @change="handleTableChange" > <div slot="trialQuota" slot-scope="text">{{ text }}小时</div> <template slot="action" slot-scope="text, record"> <a-button type="link" @click="openDetail(text, record)"> 详情 </a-button> <a-button type="link" @click="openCharge(text)"> 充账 </a-button> <a-button type="link" :disabled="text.tryData" @click="onTry(text)"> 试用 </a-button> </template> </a-table> </div> .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: 'vpnAddress', scopedSlots: { customRender: 'vpnAddress' }, // 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' }]实现出来的效果如下：
到此，相信大家对“antd table怎么实现长表格出现滚动条”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
