表格固定列和表头

<template>
  <div class="rooms-container">
    <div class="el-table el-table--fit el-table--scrollable-x el-table--scrollable-y el-table--enable-row-transition" style="width: 100%; height: 250px;">
    <div class="el-table__header-wrapper" ref="headerWrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 930px;">
          <thead class="has-gutter">
              <tr class="">
                  <th class="is-leaf">
                      <div class="cell">日期</div>
                  </th>
                  <th class="is-leaf">
                      <div class="cell">姓名</div>
                  </th>
                  <th class="is-leaf">
                      <div class="cell">省份</div>
                  </th>
                  <th class="is-leaf">
                      <div class="cell">市区</div>
                  </th>
                  <th class="is-leaf">
                      <div class="cell">地址</div>
                  </th>
                  <th class="is-leaf">
                      <div class="cell">邮编</div>
                  </th>
                  <th class="gutter" style="width: 17px;"></th>
              </tr>
          </thead>
        </table>
    </div>
    <div class="el-table__body-wrapper is-scrolling-left" style="height: 203px;" @scroll="bodyWrapperScroll">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 913px;">
          <tbody>
              <tr class="el-table__row" v-for="item in 7">
                  <td>
                      <div class="cell">2016-05-03</div>
                  </td>
                  <td>
                      <div class="cell">王小虎</div>
                  </td>
                  <td>
                      <div class="cell">上海</div>
                  </td>
                  <td>
                      <div class="cell">普陀区</div>
                  </td>
                  <td>
                      <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                  </td>
                  <td>
                      <div class="cell">200333</div>
                  </td>
              </tr>
          </tbody>
        </table>
    </div>
    <div class="el-table__fixed" style="width: 150px; height: 233px;">
        <div class="el-table__fixed-header-wrapper">
            <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 913px;">
              <thead class="">
                  <tr class="">
                      <th class="is-leaf">
                          <div class="cell">日期</div>
                      </th>
                      <th class="is-leaf">
                          <div class="cell">姓名</div>
                      </th>
                      <th class="is-leaf">
                          <div class="cell">省份</div>
                      </th>
                      <th class="is-leaf">
                          <div class="cell">市区</div>
                      </th>
                      <th class="is-leaf">
                          <div class="cell">地址</div>
                      </th>
                      <th class="is-leaf">
                          <div class="cell">邮编</div>
                      </th>
                  </tr>
              </thead>
            </table>
        </div>
        <div class="el-table__fixed-body-wrapper" ref="fixedBodyWrapper" style="top: 47px; height: 186px;">
            <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 913px;">
              <tbody>
                  <tr class="el-table__row" v-for="item in 7">
                      <td>
                          <div class="cell">2016-05-03</div>
                      </td>
                      <td>
                          <div class="cell">王小虎</div>
                      </td>
                      <td>
                          <div class="cell">上海</div>
                      </td>
                      <td>
                          <div class="cell">普陀区</div>
                      </td>
                      <td>
                          <div class="cell">上海市普陀区金沙江路 1518 弄</div>
                      </td>
                      <td>
                          <div class="cell">200333</div>
                      </td>
                  </tr>

              </tbody>
            </table>
        </div>
    </div>
</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  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{
  background: white;
  position: relative;
  width: 600px;
}
.el-table{
      width: 100%;
    height: 250px;
  position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    font-size: 14px;
    color: #606266;
}
.el-table__header-wrapper{
      overflow: hidden;
          width: 100%;
}
.el-table__body, .el-table__footer, .el-table__header{
  width: 930px;
      table-layout: fixed;
    border-collapse: separate;
}
.el-table__body-wrapper {
  height: 203px;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
  width: 100%;
  table{
    width: 913px;
    table-layout: fixed;
    border-collapse: separate;
  }
}
.el-table__fixed, .el-table__fixed-right {
    position: absolute;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,.12);
    width: 150px;
    height: 233px;
}
.el-table__fixed-header-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}
.el-table__fixed-body-wrapper {
    position: absolute;
    left: 0;
    top: 37px;
    overflow: hidden;
    z-index: 3;
    top: 47px;
    height: 186px;
}
</style>