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>
    

      

  • 相关阅读:
    Mybatis批量插入
    easyui中datagrid常见功能
    mysql下载和安装方式
    Mybatis注意事项
    ol3对地图上某些特定的经纬度进行标注
    ol3开发离线地图
    java利用poi生成excel文件后下载本地
    log4j的基本使用方法
    tomcat8.5之后版本,远程无法登录管理页面
    但构造函数返回对象时
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/15420624.html
Copyright © 2011-2022 走看看