antd table怎么实现长表格出现滚动条

本篇内容主要讲解“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怎么实现长表格出现滚动条”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！