vue el-table滚动条联动效果

Pett

已于 2022-10-12 10:54:10 修改

阅读量407

点赞数 1

文章标签： vue.js javascript 前端

于 2022-10-12 10:53:11 首次发布

本文链接：https://blog.csdn.net/qq_38247038/article/details/127278468

版权

需求效果如图所示

思路很简单鼠标控制Atable滚动条的时候把scrollLeft赋给Btable 反之Btable赋给Atable 直接上demo吧

<!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>