vue table大屏自动刷新滚动效果

1.实现效果

2.步骤原理

1.样式：thead头部固定，tbody滚动，动态给tbody加动画效果

2.数据：计时器更改数据变化，每次数组尾部添加第一个元素 this.tableData.push(this.tableData[0])，再去除第一个元素 this.tableData.shift()

3.判断刷新数据: this.tableData[0].id === this.endId 滚动的数组第一个元素等于原始数组最后一个时，请求后台刷新数据，清清除计时器

3.具体实现步骤

1.table结构

<div class="box2">
        <table border="1" class="table_main">
          <thead>
            <tr>
              <th class="coll1">工单号</th>
              <th class="coll2">是否紧急</th>
              <th class="coll3">工单状态</th>
              <th class="coll4">报修科室</th>
              <th class="coll5">维修事项</th>
              <th class="coll6">维修地点</th>
              <th class="coll7">备注</th>
              <th class="coll8">派工时间</th>
              <th class="coll9">处理人</th>
            </tr>
          </thead>
          <thead class="zindex">
            <tr>
              <th class="coll1">工单号</th>
              <th class="coll2">是否紧急</th>
              <th class="coll3">工单状态</th>
              <th class="coll4">报修科室</th>
              <th class="coll5">维修事项</th>
              <th class="coll6">维修地点</th>
              <th class="coll7">备注</th>
              <th class="coll8">派工时间</th>
              <th class="coll9">处理人</th>
            </tr>
          </thead>
          <tbody :class="{anim:animate==true, hei: isLenght===true}">
            <tr v-for="(item, index) in tableData" :key="index" :class="{red: item.gdStatusName==='待受理', yellow: item.gdStatusName==='待接收'}">
              <td class="coll1" :title="item.code">{{ item.code }}</td>
              <td class="coll2" :title="item.isUrgentName">{{ item.isUrgentName }}</td>
              <td class="coll3" :title="item.gdStatusName">{{ item.gdStatusName }}</td>
              <td class="coll4" :title="item.deptName">{{ item.deptName }}</td>
              <td class="coll5" :title="item.items">{{ item.items }}</td>
              <td class="coll6" :title="item.palce">{{ item.palce }}</td>
              <td class="coll7" :title="item.remarks">{{ item.remarks }}</td>
              <td class="coll8" :title="item.distributeTime">{{ item.distributeTime }}</td>
              <td class="coll9" :title="item.userName">{{ item.userName }}</td>
            </tr>
          </tbody>
        </table>
      </div>

第二个thead是页面看到的thead，为了解决下面的滚动上去和thead重合显示的问题

2.方法

data () {
    return {
      timer: '',
      animate: false,
      tableData: [],
      endId: '',
      isLenght: false
    }
  },

 

created () {
    this.getList()
 },

getList () {
      listGuarantee().then(res => {
        console.log('res', res)
        this.tableData = res.data
        this.endId = this.tableData[this.tableData.length - 1].id
        if (this.tableData.length > 10) {
          this.isLenght = true
          this.timer = setInterval(this.scroll, 3000)
        } else {
          this.isLenght = false
          clearInterval(this.timer)
        }
      })
    },

scroll () {
      this.animate = true
      setTimeout(() => {
        this.tableData.push(this.tableData[0])
        this.tableData.shift()
        this.animate = false
        if (this.tableData[0].id === this.endId) {
          // console.log('请求刷新数据')
          this.getList()
          clearInterval(this.timer)
        }
      }, 500)
    }

3.样式

.box2{
  width: 100%;
  height: 400px;
  padding: 10px;
  overflow: hidden;
  background: rgba(6, 6, 122, 0.4);
}
.table_main{
  width: 100%;
  text-align: center;
  border: 1px solid #86c7ff;
  color: #fff;
  position: relative;
}
.table_main tr{
  line-height: 32px;
}
.table_main thead {
  width: 100%;
  line-height: 40px;
  font-size: 16px;
  display: table;
  table-layout: fixed;
  border-bottom: none;
  box-sizing: border-box;
}
.zindex{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  /* background: #06067a; */
  background: #10107a;
  border-bottom: none;
}
.zindex tr th{
  border-bottom: none;
}
.table_main thead th {
  font-weight: 300;
  table-layout: fixed;
  box-sizing: border-box;
}
.table_main tbody.hei{
  height: 352px;
}
.table_main tbody {
  display: block;
  width: 100%;
  background: rgba(6, 6, 122, 0.6);
  /* height: 352px; */
  /* 隐藏滚动条兼容 */
  -ms-scroll-chaining: chained;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  /* -ms-scroll-snap-type: proximity; */
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  overflow-y: scroll;
  /* 火狐 */
  scrollbar-width: none;
  /* ie */
  -ms-overflow-style: none;
}
.table_main tbody::-webkit-scrollbar {
  display: none;
}
.table_main tbody tr {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.table_main tbody tr td {
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box2 .coll1{
  width: 6%;
}
.box2 .coll2{
  width: 6%;
}
.box2 .coll3{
  width: 6%;
}
.box2 .coll4{
  width: 10%;
}
.box2 .coll5{
  width: 14%;
}
.box2 .coll6{
  width: 18%;
}
.box2 .coll7{
  width: 12%;
}
.box2 .coll8{
  width: 12%;
}
.box2 .coll9{
  width: 6%;
}
.anim{
  transition: all 0.5s;
  margin-top: -32px;
}

.red{
  color: #ff0000;
}
.yellow{
  color: #ffcc00;
}