elementUi+table实现表格数据滚动

elementUi+table实现表格数据滚动

引用vue和elementUI CDN

// 引用elementUI CDN
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

// 引用VUE CDN
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

1.页面代码

<div id="app">
    <el-table ref="table" class="table2" height="350" :data="tableData">
        <el-table-column prop="data1" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="data2" label="科室" align="center">
        </el-table-column>
    </el-table>
</div>

2.数据

new Vue({
    el: '#app',
    data: function () {
      return {
        tableData: [
                {
                    data1: "1",
                    data2: "外科手术室"
                },
                {
                    data1: "2",
                    data2: "内科手术室"
                },
                {
                    data1: "3",
                    data2: "骨关节科"
                },
                {
                    data1: "4",
                    data2: "麻醉一科"
                },
                {
                    data1: "5",
                    data2: "心内"
                },
                {
                    data1: "6",
                    data2: "运动医学科"
                },
                {
                    data1: "7",
                    data2: "骨关节科"
                },
                {
                    data1: "8",
                    data2: "运动医学科"
                },
                {
                    data1: "7",
                    data2: "脊柱外科"
                },
                {
                    data1: "9",
                    data2: "心血管内科一病区"
                },
                {
                    data1: "10",
                    data2: "心血管内科二病区"
                },
                {
                    data1: "11",
                    data2: "心血管外科"
                },
            ],
        }
    }
})

3.滚动逻辑

mounted() {
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.table
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
        }
    }, 100)
}

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-table ref="table" class="table2" height="350" :data="tableData">
            <el-table-column prop="data1" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="data2" label="科室" align="center">
            </el-table-column>
        </el-table>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [
                    {
                        data1: "1",
                        data2: "外科手术室"
                    },
                    {
                        data1: "2",
                        data2: "内科手术室"
                    },
                    {
                        data1: "3",
                        data2: "骨关节科"
                    },
                    {
                        data1: "4",
                        data2: "麻醉一科"
                    },
                    {
                        data1: "5",
                        data2: "心内"
                    },
                    {
                        data1: "6",
                        data2: "运动医学科"
                    },
                    {
                        data1: "7",
                        data2: "骨关节科"
                    },
                    {
                        data1: "8",
                        data2: "运动医学科"
                    },
                    {
                        data1: "7",
                        data2: "脊柱外科"
                    },
                    {
                        data1: "9",
                        data2: "心血管内科一病区"
                    },
                    {
                        data1: "10",
                        data2: "心血管内科二病区"
                    },
                    {
                        data1: "11",
                        data2: "心血管外科"
                    },
                ],
            }
        },
        mounted() {
            // 拿到表格挂载后的真实DOM
            const table = this.$refs.table
            // 拿到表格中承载数据的div元素
            const divData = table.bodyWrapper
            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
            setInterval(() => {
                // 元素自增距离顶部1像素
                divData.scrollTop += 1
                // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                    // 重置table距离顶部距离
                    divData.scrollTop = 0
                }
            }, 100)
        }
    })
</script>

</html>