vue表格自动轮播小组件(简陋)

<template>
  <div class="scorll-table">
    <table class="table" @mouseenter="enter" @mouseleave="start">
      <thead class="thead">
        <tr class="thead-tr">
          <td v-for="(item,index) in config" :key="index" class="thead-tr-td">{{item.title}}</td>
        </tr>
      </thead>
      <tbody class="tbody" ref="tbody anim" :class="{anim:animate==true}">
        <tr v-for="(item,index) in Data" :key="index" class="tbody-tr">
          <td v-for="(res,i) in config" :key="i" class="tbody-tr-td">{{item[res.key]}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "scorllTable",
  props: {
    //   宽
    width: {
      type: String || Number,
    },
    /**
     * 表头信息
     *  举例：[
     *   {key: "module_name",title: "模块名称"},
     *   {key: "name", title: "成果名称"},
     *   {key: "num",title: "数量"},],
     *   title 表头名字   key 循环表格数据时的key 值
     */
    config: {
      type: Array,
    },
    // 表格数据
    tableData: {
      type: Array,
    },
  },
  data() {
    return {
      Data: [], // 表格数据
      animate: false, // 动画
      time: null, // 定时器
    };
  },
  mounted() {
    this.Data = JSON.parse(JSON.stringify(this.tableData));
    this.time = setInterval(this.openTheScroll, 1000);
  },
  methods: {
    /**
     * @description 开始滚动
     * @param
     */
    openTheScroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.Data.push(this.Data[0]); // 将数组的第一个元素添加到数组的
        this.Data.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 500);
    },
    /**
     * @description 鼠标移入
     */
    enter() {
      clearInterval(this.time);
      //   this.Data =JSON.parse(JSON.stringify(this.tableData));
    },
    /**
     * @description 鼠标移除
     */
    start() {
      this.time = setInterval(this.openTheScroll, 1000);
    },
    /**
     * @description 清除定时器
     * @param
     */
    clearTime() {
      clearInterval(this.time);
    },
  },
};
</script>

<style lang="scss" scoped>
.scorll-table {
  width: 100%;
  height: 300px;
  background: #ccc;
  overflow: hidden;
}
.table {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.thead {
  height: 40px;
  line-height: 40px;
  position: absolute;
  width: 100%;
  z-index: 99;
  background: #fff;
}
.thead-tr {
  display: flex;
  .thead-tr-td {
    flex: 1;
  }
}
.tbody {
  flex: 1;
  border: 0.5px solid #fff;
  position: absolute;
  top: 40px;
  left: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.tbody-tr {
  display: flex;
  .tbody-tr-td {
    flex: 1;
    height: 40px;
    line-height: 40px;
    border: 0.5px solid #fff;
  }
}
.anim {
  transition: all 0.5s;
  margin-top: -40px;
}
</style>