Vue表格滚动

最终效果图:


步骤一

钩子:


钩子代码:

    async created() {

 //食堂信息滚动

    if (this.tableData.length > 2) {    //判断表格的长度

      this.a = setInterval(() => {

        //一直调用

        this.restaurantTableMove();   //调用方法

      }, 100);

    }

    },

步骤二

钩子调用的方法


代码:

 ///食堂信息滚动

    restaurantTableMove() {

      var len = this.$refs.restauranttable.bodyWrapper.scrollHeight / 2 + 6; //进度条最大高度,可以加快滚动速度

      this.progressbarLen1 += 1;

      this.$refs.restauranttable.bodyWrapper.scrollTop = this.progressbarLen1;

      if (this.progressbarLen1 > len) {

        this.progressbarLen1 = 0;

        this.$refs.restauranttable.bodyWrapper.scrollTop = 0;

      }

    },

步骤三

进度条长度(因为滚动方法必要)


代码:

progressbarLen1: 0, //标记进度条长度

步骤四

重点:1.引用ref  2.高度height

表格代码:(忽略表格数据)

    <el-table

                     ref="restauranttable"   // 引用

                     height="200px"    // 高度

                     border

    :header-cell-style="tableHeaderColor"

      :data="tableData"

      style="width: 100%;color:#FFFFFF">

      <el-table-column

        prop="date"

        label="序号"

        width="180">

      </el-table-column>

      <el-table-column

        prop="name"

        label="仓库">

      </el-table-column>

      <el-table-column

        prop="address"

        label="品名">

      </el-table-column>

            <el-table-column

        prop="data"

        label="入库时间">

      </el-table-column>

            <el-table-column

        prop="amount"

        label="数量">

      </el-table-column>

      </el-table-column>

            <el-table-column

        prop="status"

        label="状态">

      </el-table-column>

    </el-table>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,507评论 2 59
  • 前端常见的一些问题 1.前端性能优化手段? 1. 尽可能使用雪碧图2. 使用字体图标代替图片3. 对HTML,cs...
    十八人言阅读 4,890评论 0 1
  • 30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度) 前言 本文以前端面试官的角度出发...
    Jiao_0805阅读 6,268评论 0 31
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 127,411评论 2 7
  • 16宿命:用概率思维提高你的胜算 以前的我是风险厌恶者,不喜欢去冒险,但是人生放弃了冒险,也就放弃了无数的可能。 ...
    yichen大刀阅读 11,299评论 0 4

友情链接更多精彩内容