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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容