未古其人

目录

表格自动滚动

1. 下载依赖

npm i element-ui -S
npm install vue-seamless-scroll --save

2. 使用

<template>
  <div class="backround">
    <div class="toptitle">
      <div class="item">日期</div>
      <div class="item">姓名</div>
      <div class="item">地址</div>
    </div>
    <vue-seamless-scroll :data="listData" class="seamless-warp">
      <el-table :data="listData" :show-header="status">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="title" label="姓名"> </el-table-column>
        <el-table-column prop="test" label="地址"> </el-table-column>
      </el-table>
    </vue-seamless-scroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: false,
      listData: [
        {
          date: "20221116",
          title: "第一行",
          test: "测试",
        },
        {
          date: "20221116",
          title: "第2行",
          test: "测试",
        },
        { date: "20221116", title: "第3行", test: "测试" },
        { date: "20221116", title: "第4行", test: "测试" },
        { date: "20221116", title: "第5行", test: "测试" },
        { date: "20221116", title: "第6行", test: "测试" },
      ],
    };
  },
  computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 50, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>
<style>
.seamless-warp {
  height: 300px;
  overflow: hidden;
}
.el-table .cell {
  text-align: center;
}
.toptitle {
  width: 100%;
  display: flex;
  background-color: red;
  margin-bottom: 10px;

  border-bottom: 1px solid green;
  background-color: transparent;
  color: pink;
}
.item {
  width: 33.3%;
  height: 48px;
  line-height: 48px;
  text-align: center;
}
</style>

3. 参考