element ui table内容自动滚动

     1.html     

                        :data="refugeList"

                        height="240px"

                        ref="refugeListRef"

                      >

                       

                       

                       

                          prop="a"

                          label="应急避难所名称"

                          width="180"

                        >

                       

                       

                          prop="b"

                          label="可容纳人数"

                          width="180"

                        >

                       

                       

                       

                     

2.

  mounted() {

    this.refugeListRef();

  },

    refugeListRef() {

      const table = this.$refs.refugeListRef;

      // 拿到表格中承载数据的div元素

      const divData = table.bodyWrapper;

      // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)

      setInterval(() => {

        // 元素自增距离顶部1像素

        divData.scrollTop += 50;

        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)

        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {

          // 重置table距离顶部距离

          divData.scrollTop = 0;

        }

      }, 1000); // 滚动速度

    },

table需要设置高度

你可能感兴趣的:(vue.js,elementui,javascript)