世界热讯:elementUi+table实现表格数据滚动

2023-05-05 18:17:00 来源：博客园

(相关资料图)

elementUi+table实现表格数据滚动

引用vue和elementUI CDN

// 引用elementUI CDN<script src="https://unpkg.com/vue@2/dist/vue.js"></script><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.页面代码

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)}

完整代码

                                                                                    
<script src="https://unpkg.com/vue@2/dist/vue.js"></script><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>

关键词：