<ag-table offsetTop="57.5">
    <tr slot="thead">
        <!-- 定义表头列 -->
        <th v-if="isExpand">姓名</th>
        <th v-for="(each, index) in singleTableHead" :key="index">{{ each }}</th>
    </tr>
    <tr v-for="(each, index) in singleTableBody" slot='tbody' :key="`tbody-${index}`">
        <!-- 渲染表体内容 -->
        <td v-if="isExpand">{{ each.name }}</td>
        <td>{{ each.verdict }}</td>
        <td>{{ each.song }}</td>
    </tr>
</ag-table>

<template>
  <div class="ange-table">
    <table ref="middle-table">
      <thead class="thead-middle"
             :style="theadStyle">
          <slot name="thead" />
      </thead>
      <tbody>
        <slot name="tbody" />
      </tbody>
    </table>
  </div>
</template>

export default {
  data () {
    return: {
      fixed: { // fixed状态
        top: false
      },
      clientRect: { // 位移值
        top: 0
      }
    }
  },
  computed: {
    theadStyle () {
      const { top } = this.clientRect
      return {
        transform: `translate3d(0px, ${this.fixed.top
            ? -top
            : 0}px, 1px)`
        }
    }
  },
  watch: {
    'clientRect.top': function (val) {
      // 判断到DOMRect的top值小于0时，开始fixed
      this.fixed.top = val < 0
    }
  },
  mounted () {
    // 监听页面滚动事件，获取table对象的DOMRect属性
    window.addEventListener('scroll', this.scrollHandle, {
      capture: false,
      passive: true
    })
  },
  methods: {
    scrollHandle () {
      const $table = this.$refs.table
      if(!$table) return

      const { top } = $table.getBoundingClientRect()
      this.clientRect.top = Math.floor(top - parseInt(this.offsetTop, 10))
    }
  }
}

<template>
  <div class="ange-table">
    <!-- left table -->
    <table v-if="hasLeftTable"
         ref="leftTable"
         :style="leftStyle">
      <thead class="thead-left"
             :style="theadStyle">
          <slot name="leftThead" />
      </thead>
      <tbody>
          <slot name="leftBody" />
      </tbody>
    </table>
    <!-- middle table -->
    <table ref="table" class="table-middle">
      <thead class="thead-middle"
             :style="theadStyle">
          <slot name="thead" />
      </thead>
      <tbody>
          <slot name="tbody" />
      </tbody>
    </table>
    <!-- right table -->
    <table v-if="hasRightTable"
           ref="rightTable"
           :style="rightStyle">
      <thead class="thead-right"
             :style="theadStyle">
          <slot name="rightThead" />
      </thead>
      <tbody>
          <slot name="rightBody" />
      </tbody>
    </table>
  </div>
</template>

export default {
  computed: {
    leftStyle () { // 左侧表格位移
      const { left } = this.clientRect
      return {
        transform: `translate3d(${this.fixed.left
            ? left
            : 0}px, 0px, 1px)`
      }
    },
    rightStyle () { // 右侧表格位移
      const { right } = this.clientRect
      return {
          transform: `translate3d(${-right}px, 0px, 1px)`
      }
    }
  },
  watch: {
    'clientRect.left': function (val) {
        // 横向滚动距离为正，开始设置fixed
        this.fixed.left = val > 0
      }
  },
  mounted () {
    // 存在由表格时设置其初始位移
    if(this.hasRightTable) {
        const container = this.$refs.container.getBoundingClientRect()
        const rightTable = this.$refs.rightTable.getBoundingClientRect()
        this.clientRect.right = Math.floor(rightTable.right  - container.right)
        // 记录右表格初始位移值
        this.initRight = this.clientRect.right
    }
    // 监听表格容器的滚动事件
    this.$refs.container.addEventListener('scroll', this.scrollXHandle, {
      capture: false,
      passive: true
    })

    // ...
  },
  methods: {
    scrollXHandle () {
      // ...
      this.clientRect.left = Math.floor(this.$refs.container.scrollLeft)

      const right = Math.floor(this.initRight - this.$refs.container.scrollLeft)
      this.clientRect.right = right
    }
  }
}

export default {
  mounted () {
    if(this.hasLeftTable || this.hasRightTable) {
      // 定义鼠标hover事件
      this.$el.addEventListener('mouseover', this.mouseOver, false)
      this.$el.addEventListener('mouseout', this.mouseLeave, false)
    }
  },
  methods: {
    mouseOver (e) {
      this.hoverClass(e, 'add')
    },
    mouseLeave(e) {
      this.hoverClass(e, 'remove')
    },
    hoverClass(e, type) {
      const tr = e.target.closest('tr')
      if(!tr) {
          return
      }
      const idx = tr.rowIndex // 当前hover行的编号
      const trs = querySelectorAll(`tbody tr:nth-child(${idx})`, this.$el)
      if(trs.length === 0) {
          return
      }
      // 对所有tbody下同一编号的tr添加hover类
      trs.forEach(each => {
          each.classList[type]('hover')
      })
    }
  }
}