表格固定列和表头处理

<template>
  <div class="rooms-container">
    <div class="el-table" :style="{height: `${allTableHeight}px`}">
      <div class="el-table__header-wrapper" ref="headerWrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" :style="{width: `${allTablewidth}px`}">
          <thead class="has-gutter">
            <tr>
              <th class="is-leaf" v-for="(item, index) in 30">
                <div class="cell">日期{{index}}</div>
              </th>
              <th class="gutter" :style="{width: `${scrollBarWidth}px`}"></th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="el-table__body-wrapper" :style="{height: `${allTableHeight - 81}px`}" @scroll="bodyWrapperScroll">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" 
          :style="{width: `${allTablewidth - scrollBarWidth}px`}">
          <tbody>
            <tr class="el-table__row" v-for="item in 7">
              <td v-for="(tdItem, tdIndex) in 30">
                <div class="cell">普陀区{{tdIndex}}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="el-table__fixed" :style="{height: `${allTableHeight - scrollBarWidth}px`}">
        <div class="el-table__fixed-header-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" 
            :style="{width: `${allTablewidth - scrollBarWidth}px`}">
            <thead>
              <tr>
                <th class="is-leaf" v-for="(item, index) in 30">
                  <div class="cell">日期{{index}}</div>
                </th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="el-table__fixed-body-wrapper" ref="fixedBodyWrapper" 
          :style="{height: `${allTableHeight - scrollBarWidth - 81}px`}">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" 
            :style="{width: `${allTablewidth - scrollBarWidth}px`}">
            <tbody>
              <tr class="el-table__row" v-for="item in 7">
                <td v-for="(tdItem, tdIndex) in 30">
                  <div class="cell">普陀区{{tdIndex}}</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      allTablewidth: 240 + 30 * 120,
      scrollBarWidth: 17,
      allTableHeight: document.body.scrollHeight - 114
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    bodyWrapperScroll (e) {
      this.$refs.fixedBodyWrapper.scrollTop = e.target.scrollTop
      this.$refs.headerWrapper.scrollLeft = e.target.scrollLeft
    }
  }
}
</script>
<style lang="scss" scoped>
.rooms-container{
  width: 100%;
}
.el-table__body-wrapper {
  overflow-y: auto;
  overflow-x: auto;
}
.el-table__fixed{
  width: 240px;
}
.el-table td, .el-table th{
  padding: 29px 0;
}
.el-table__fixed-body-wrapper{
  top: 81px;
}
</style>