1、将table表格用div标签包裹起来
2、设置div的style
="overflow:auto;width:100%"
3、设置table的style="
white-space
:nowrap"
<template>
<div class="container">
<p>整体情况<van-button type="primary" @click="toExcel()">导出为Excel</van-button></p>
<div style="overflow:auto;width:100%">
<table border="2" class="tabStyle">
<th>部门名称</th>
<th>已对接证件类型数</th>
<th>待对接证件类型数</th>
<th>本月入库证件数</th>
<th>累计入库证件数</th>
<th>累计质检入库率</th>
<td>111111111111</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</table>
</div>
<a id="forExport" style="visibility: hidden" href="#"></a>
</div>
</div>
</div>
</template>
<script>
</script>
<style scoped lang="less">
.container{
.tabStyle {
white-space:nowrap;
font-size: 10px;
height: 40px;
text-align: center;
padding: 0 10px;
height: 40px;
text-align: center;
.secTable {
padding: 0 10px;
padding: 0 10px;
.lastTable {
width: 130px;
width: 130px;
</style>
展示结果:
超出屏幕宽度时,表格是可以在可视范围中移动的