本篇内容主要讲解“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怎么实现长表格出现滚动条”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。