element多個table實現(xiàn)同步滾動的示例代碼

更新時間：2021年09月29日 10:12:14 作者：我要睡覺了~

本文主要介紹了element多個table實現(xiàn)同步滾動，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

element ui 實現(xiàn)多個table同時滾動，橫向縱向滾動

在這里插入圖片描述

代碼如下：

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<div id="app">
<template>
    <el-table
      ref="table1"
      border="10"
      height="150"
      :data="tableData"
      style="width: 800px">
      <el-table-column
        prop="date"
        label="日期"
        width="300">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="300">
      </el-table-column>
      <el-table-column
        width="300px"
        prop="address"
        label="地址">
      </el-table-column>
            <el-table-column
        width="300px"
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <br/>
    <el-table
      ref="table2"
      border="10"
      height="150"
      :data="tableData"
      style="width: 800px">
      <el-table-column
        prop="date"
        label="日期"
        width="300">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="300">
      </el-table-column>
      <el-table-column
        width="300px"
        prop="address"
        label="地址">
      </el-table-column>
            <el-table-column
        width="300px"
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
</div>

var Main = {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }],
          dom1: null,
          dom2: null
        }
      },
      mounted() {
        this.dom1 = this.$refs.table1.bodyWrapper
        this.dom2 = this.$refs.table2.bodyWrapper

        this.listenerScroll()
      },
      methods: {
        listenerScroll() {
          this.dom2.addEventListener('scroll', () => {
            // 橫滾
            this.dom1.scrollLeft = this.dom2.scrollLeft
            // 豎滾
            this.dom1.scrollTop = this.dom2.scrollTop
          })
        }
      }
    }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

到此這篇關于element多個table實現(xiàn)同步滾動的文章就介紹到這了,更多相關element table同步滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: