vue + better 使用纵向滚动后，横向滚动出现问题解决方案

vue + better 使用纵向滚动后，横向滚动出现问题解决方案

左右滚动这个table，使用了better-scroll之后，但是横向滚动出现异常，异常需要设置以下

使用

• html

      <div class="table_wrap" ref="table_wrap">
      	// 外层 套一个可以滚动的区域 设置宽
        <div class="table_scroll">
          <TableShow
            :tableData="cumulativeFinancialExpenseRate.tableData"
          ></TableShow>
        </div>
      </div>

• js

import BScroll from "better-scroll";

  mounted() {
    this.scroll = new BScroll(this.$refs.table_wrap, {
      scrollX: true,
      click: true,
      freeScroll: true,
    });
  },

• css

    .table_wrap {
      max-width: 100%;
      white-space: nowrap; /*实现子元素不换行*/
      min-height: 42px;
      .table_scroll {
        width: 1000px;
      }

      ::v-deep .table_header {
        width: 1000px;
        & > div:nth-child(1) {
          width: 64px;
        }
        & > div {
          width: 53px;
        }
      }
      ::v-deep .table_body {
        width: 1000px;
        & > .table_body_item {
          & > div:nth-child(1) {
            width: 64px;
          }
          & > div {
            width: 53px;
          }
        }
      }