vue element-ui el-table 的滚动条联动效果

最新推荐文章于 2025-07-14 14:26:56 发布

✧* ꧁柠檬ヤ汽水꧂✧*

最新推荐文章于 2025-07-14 14:26:56 发布

阅读量1.8k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_44381873/article/details/131201737

需求效果如图所示，可以上下或者左右

思路：鼠标控制Atable滚动条的时候,

把scrollLeft或者scrollTop赋给Btable,

反之Btable赋给Atable,

一：下面是页面直接展示情况下的写法：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 要先引入vue.js 否则报错 -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id='app'>
        <el-table id="table1" :data="tableData" style="width: 100%" :header-cell-style="{
            textAlign: 'center',
            padding: '0px',
            height: '50px',
          }" :cell-style="{ textAlign: 'center' }" border>
            <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 prop="address" label="地址" width="300">
            </el-table-column>
            <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 prop="address" label="地址" width="300">
            </el-table-column>
            <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 prop="address" label="地址" width="300">
            </el-table-column>
        </el-table>

        <el-table id="table2" :data="tableData" style="width: 100%" :header-cell-style="{
            textAlign: 'center',
            padding: '0px',
            height: '50px',
          }" :cell-style="{ textAlign: 'center' }" border>
            <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 prop="address" label="地址" width="300">
            </el-table-column>
            <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 prop="address" label="地址" width="300">
            </el-table-column>
            <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 prop="address" label="地址" width="300">
            </el-table-column>
        </el-table>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            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 弄'
                    }]
                }
            },
            watch: {
            },
            mounted() {
                let overElement = "";
                let AA = document.querySelector(
                    "#table1 .el-table__body-wrapper"  //要拿到dom为"el-table__body-wrapper is-scrolling-left" 的才有效
                );
                let BB = document.querySelector(
                    "#table2 .el-table__body-wrapper"
                );
                AA.onmouseover = () => {
                    overElement = "a";
                };
                BB.onmouseover = () => {
                    overElement = "b";
                };
                AA.addEventListener("scroll", () => {
                    if (overElement === "a") {
                        BB.scrollLeft = AA.scrollLeft;
                    }
                });
                BB.addEventListener("scroll", () => {
                    if (overElement === "b") {
                        AA.scrollLeft = BB.scrollLeft;
                    }
                });
            },
            methods: {
            }
        })
    </script>
</body>

</html>
<style>
</style>

二：还有一种写在 el-dialog 弹窗里面的，如果还是按上面的写会报错，需要修改下

//这是结构
      <el-dialog title="" class="dialoge" :visible.sync="dialogVisible" 
width="95%">
        <div class="battle">
          <div class="cons">
            <div class="tabs leftTab">
              <el-table id="table-list1" class="table-listall" 
:data="resTableData" stripe height="550" border
                style="width: 100%" :row-style="{ height: '0' }" 
:cell-style="{ padding: '0' }" ref="table1">
                <template v-for="(item, index) in dbLabelVal">
                  <el-table-column align="center" :key="index" 
:prop="item.prop" :label="item.label"
                    :show-overflow-tooltip='true' 
v-if="item.label !== '对比状态'">
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
          <div class="cons">
            <div class="tabs rightTab">
              <el-table id="table-list2" class="table-listall" 
:data="resHISData" stripe height="550" border
                style="width: 100%" :row-style="{ height: '0' }" 
:cell-style="{ padding: '0' }" ref="table2">
                <template v-for="(item, index) in dbLabelVal">
                  <el-table-column align="center" :key="index" 
:prop="item.prop" :label="item.label"
                    :show-overflow-tooltip='true' 
v-if="item.label !== '对比状态'">
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </el-dialog>


//这是方法
 data() {
      return {
        dialogVisible: false
      };
    },
methods:{
   tableAllScroll() {
      let overElement = "";
      let AA = document.querySelector("#table-list1 .el-table__body-wrapper");
      let BB = document.querySelector("#table-list2 .el-table__body-wrapper");
      // debugger;
      AA.onmouseover = () => {
        overElement = "a";
      };
      BB.onmouseover = () => {
        overElement = "b";
      };
      AA.addEventListener("scroll", () => {
        if (overElement === "a") {
          BB.scrollTop = AA.scrollTop;
          AA.scrollLeft = BB.scrollLeft;
        }
      });
      BB.addEventListener("scroll", () => {
        if (overElement === "b") {
          AA.scrollTop = BB.scrollTop;
          AA.scrollLeft = BB.scrollLeft;
        }
      });
    },
}

watch:{ 
//监听 弹窗的dialogVisible，等弹窗展示出来后，才有dom结构，这时候才能获取到dom，不会报错
    dialogVisible(val) {
      val && this.$nextTick(() => {
        this.tableAllScroll();
      });

    }() {
     this.$nextTick(() => {
        this.tableAllScroll();
      });
    }
}

容易踩坑的就是之前dialog没显示，就是在mounted里面去获取dom元素，一直报错，解决方法就是监听dialog，当弹出后，dom渲染完了再去获取就好了