添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

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>

展示结果: 超出屏幕宽度时,表格是可以在可视范围中移动的