两个el-table共用一个横向滚动条

如果你不需要其中一个表的滚动条，你可以直接起clas名，然后将滚动条隐藏，反之去掉即可

<template>

  <div style="background: #fff;padding:10px">

    <el-table :data="tableData" style="width: 500px" ref="firstTable">

      <el-table-column prop="date" label="日期" width="180">

      </el-table-column>

      <el-table-column prop="name" label="姓名" width="180">

      </el-table-column>

      <el-table-column prop="address" label="地址" width="250px">

      </el-table-column>

    </el-table>

    <el-table :data="tableOtherData" style="width: 500px" ref="secondTable" class="Tableone">

      <el-table-column prop="date" label="日期" width="180">

      </el-table-column>

      <el-table-column prop="name" label="姓名" width="180">

      </el-table-column>

      <el-table-column prop="address" label="地址" width="250px">

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  name: 'demo',

  data() {

    return {

      tableData: [{

        date: '2016-05-02',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1518 弄'

      }, {

        date: '2016-05-04',

        name: '大虎',

        address: '上海市普陀区金沙江路 1517 弄'

      }, {

        date: '2016-05-01',

        name: '哈哈哈',

        address: '上海市普陀区金沙江路 1519 弄'

      }, {

        date: '2016-05-03',

        name: '小新',

        address: '上海市普陀区金沙江路 1516 弄'

      }],

      tableOtherData: [{

        date: '2016-05-02',

        name: '张三',

        address: '上海市普陀区金沙江路 1518 弄'

      }, {

        date: '2016-05-04',

        name: '张四',

        address: '上海市普陀区金沙江路 1517 弄'

      }, {

        date: '2016-05-01',

        name: '张五',

        address: '上海市普陀区金沙江路 1519 弄'

      }, {

        date: '2016-05-03',

        name: '张六',

        address: '上海市普陀区金沙江路 1516 弄'

      }],

    };

  },

  mounted() {

    this.syncScroll()

  },

  methods: {

    syncScroll() {

      let firstTable = this.$refs.firstTable.bodyWrapper

      let secondTable = this.$refs.secondTable.bodyWrapper

      firstTable.addEventListener("scroll", () => {

        secondTable.scrollLeft = firstTable.scrollLeft

      })

      secondTable.addEventListener("scroll", () => {

        firstTable.scrollLeft = secondTable.scrollLeft

      })

    }

  }

};

</script>

<style>

.Tableone ::-webkit-scrollbar,

::-webkit-scrollbar-track,

::-webkit-scrollbar-thumb {

  display: none;

}

</style>