zoukankan      html  css  js  c++  java
  • elementui eltable滚动

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>element-ui table自动滚动</title>
        </head>
        <script src="https://cdn.jsdelivr.net/npm/vue"></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>
        <body>
            <div id="app">
                  <el-table
                    :data="tableData"
                    height="300"
                    border
                    style=" 70vw"
                    ref="table">
                    <el-table-column
                      prop="date"
                      label="日期"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="地址">
                    </el-table-column>
                  </el-table>
            </div>
            
            <script>
                new Vue({
                    el: '#app',
                    data() {
                        return {
                            // 表格数据
                            tableData: [
                                {
                                  date: '2016-05-03',
                                  name: '王小虎',
                                  address: '上海市普陀区金沙江路 1518 弄'
                                }, {
                                  date: '2016-05-02',
                                  name: '王小虎',
                                  address: '上海市普陀区金沙江路 1518 弄'
                                }, {
                                  date: '2016-05-04',
                                  name: '王小虎',
                                  address: '上海市普陀区金沙江路 1518 弄'
                                }, {
                                  date: '2016-05-01',
                                  name: '王小虎',
                                  address: '上海市普陀区金沙江路 1518 弄'
                                }, {
                                  date: '2016-05-08',
                                  name: '王小虎',
                                  address: '上海市普陀区金沙江路 1518 弄'
                                }, {
                                  date: '2016-05-06',
                                  name: '王小虎',
                                  address: '上海市普陀区金沙江路 1518 弄'
                                }, {
                                  date: '2016-05-07',
                                  name: '王小虎',
                                  address: '上海市普陀区金沙江路 1518 弄'
                                }]
                        }
                    },
                    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>
        </body>
    </html>
    

      

  • 相关阅读:
    Git删除本地和远程文件
    MongoDB的安装和环境配置
    Cookie和Session的区别
    如何往npm上上传自定义的模块?
    JS的一些兼容性问题
    【网络流24题】 5. 圆桌问题 题解
    【网络流24题】 6. 最长不下降子序列问题 题解
    【网络流24题】 4. 魔术球问题 题解
    【网络流24题】 3. 最小路径覆盖问题 题解
    【网络流24题】 2. 太空飞行计划问题 题解
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/15420624.html
Copyright © 2011-2022 走看看