在加上左右列冻结的效果

要实现左右列冻结的效果，我们可以将表格分成三个部分：左侧固定列、右侧固定列和滚动部分。然后，使用 better-scroll 来控制滚动部分的滚动效果，并通过 CSS 来控制左右固定列的位置和样式。

以下是一个实现左右列冻结的示例代码：

<div id="wrapper">
  <div class="fixed left">
    <table>
      <!-- 左侧固定列 -->
    </table>
  </div>
  <div class="fixed right">
    <table>
      <!-- 右侧固定列 -->
    </table>
  </div>
  <div class="scroll">
    <table>
      <!-- 滚动部分 -->
    </table>
  </div>
</div>

#wrapper {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.fixed {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.left {
  left: 0;
  width: 100px; /* 左侧固定列宽度 */
}

.right {
  right: 0;
  width: 100px; /* 右侧固定列宽度 */
}

.scroll {
  position: absolute;
  left: 100px; /* 左侧固定列宽度 */
  right: 100px; /* 右侧固定列宽度 */
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.scroll table {
  margin-left: -100px; /* 左侧固定列宽度 */
  margin-right: -100px; /* 右侧固定列宽度 */
}

import BScroll from 'better-scroll'

const wrapper = document.getElementById('wrapper')
const leftTable = document.querySelector('.left table')
const rightTable = document.querySelector('.right table')
const scrollTable = document.querySelector('.scroll table')
const scroll = new BScroll(wrapper, {
  scrollX: true,
  scrollY: true,
  click: true,
  bounce: false,
  probeType: 3
})

// 设置固定列宽度和高度
leftTable.style.width = `${leftTable.offsetWidth}px`
leftTable.style.height = `${leftTable.offsetHeight}px`
rightTable.style.width = `${rightTable.offsetWidth}px`
rightTable.style.height = `${rightTable.offsetHeight}px`

// 监听滚动事件，根据滚动位置实时更新固定列位置
scroll.on('scroll', (pos) => {
  leftTable.style.transform = `translate(0, ${pos.y}px)`
  rightTable.style.transform = `translate(0, ${pos.y}px)`
})

上述代码中，我们首先将表格分成了三个部分，并使用 CSS 来控制它们的位置和样式。然后，我们使用 BScroll 类创建了一个滚动实例，并设置了滚动方向、点击、回弹等参数。接着，我们设置了左右固定列的宽度和高度，并通过监听滚动事件来动态更新固定列的位置。

需要注意的是，由于固定列和滚动部分的单元格需要对齐，因此我们需要设置滚动部分的表格左右两侧的外边距为固定列的宽度。