vuetable⼤屏⾃动刷新滚动效果
1.实现效果
2.步骤原理
1.样式：thead头部固定，tbody滚动，动态给tbody加动画效果
2.数据：计时器更改数据变化，每次数组尾部添加第⼀个元素 this.tableData.push(this.tableData[0])，再去除第⼀个元
素 this.tableData.shift()
3.判断刷新数据: this.tableData[0].id === dId 滚动的数组第⼀个元素等于原始数组最后⼀个时，请求后台刷新数据，清清除计时器3.具体实现步骤
1.table结构
1<div class="box2">
2<table border="1" class="table_main">
3<thead>
4<tr>
5<th class="coll1">⼯单号</th>
6<th class="coll2">是否紧急</th>
7<th class="coll3">⼯单状态</th>
8<th class="coll4">报修科室</th>
9<th class="coll5">维修事项</th>
10<th class="coll6">维修地点</th>
11<th class="coll7">备注</th>
12<th class="coll8">派⼯时间</th>
13<th class="coll9">处理⼈</th>
14</tr>
15</thead>
16<thead class="zindex">
17<tr>
18<th class="coll1">⼯单号</th>
19<th class="coll2">是否紧急</th>
20<th class="coll3">⼯单状态</th>
21<th class="coll4">报修科室</th>
22<th class="coll5">维修事项</th>
23<th class="coll6">维修地点</th>
24<th class="coll7">备注</th>
25<th class="coll8">派⼯时间</th>
26<th class="coll9">处理⼈</th>
27</tr>
28</thead>
29<tbody :class="{anim:animate==true, hei: isLenght===true}">
30<tr v-for="(item, index) in tableData" :key="index" :class="{red: item.gdStatusName==='待受理', yellow: item.gdStatusName==='待接收'}">
31<td class="coll1" :title="de">{{ de }}</td>
32<td class="coll2" :title="item.isUrgentName">{{ item.isUrgentName }}</td>
33<td class="coll3" :title="item.gdStatusName">{{ item.gdStatusName }}</td>
34<td class="coll4" :title="item.deptName">{{ item.deptName }}</td>
35<td class="coll5" :title="item.items">{{ item.items }}</td>
36<td class="coll6" :title="item.palce">{{ item.palce }}</td>
37<td class="coll7" :title="arks">{{ arks }}</td>
38<td class="coll8" :title="item.distributeTime">{{ item.distributeTime }}</td>
39<td class="coll9" :title="item.userName">{{ item.userName }}</td>
40</tr>
41</tbody>
42</table>
43</div>
第⼆个thead是页⾯看到的thead，为了解决下⾯的滚动上去和thead重合显⽰的问题
2.⽅法
1 data () {
2return {
3      timer: '',
4      animate: false,
5      tableData: [],
6      endId: '',
7      isLenght: false
8    }
9  },
1 created () {
3  },
1 getList () {
2      listGuarantee().then(res => {
3        console.log('res', res)
4this.tableData = res.data
7this.isLenght = true
8this.timer = setInterval(this.scroll, 3000)
9        } else {
10this.isLenght = false
11          clearInterval(this.timer)
12        }
13      })
14    },
scroll () {
this.animate = true
setTimeout(() => {
this.tableData.push(this.tableData[0])
this.tableData.shift()
this.animate = false
if (this.tableData[0].id === dId) {
// console.log('请求刷新数据')
clearInterval(this.timer)
}
borderbox}, 500)
}
3.样式
1.box2{
2  width: 100%;
3  height: 400px;
4  padding: 10px;
5  overflow: hidden;
6  background: rgba(6, 6, 122, 0.4);
7 }
8.table_main{
9  width: 100%;
10  text-align: center;
11  border: 1px solid #86c7ff;
12  color: #fff;
13  position: relative;
14 }
15.table_main tr{
16  line-height: 32px;
17 }
18.table_main thead {
19  width: 100%;
20  line-height: 40px;
21  font-size: 16px;
22  display: table;
23  table-layout: fixed;
24  border-bottom: none;
25  box-sizing: border-box;
26 }
27.zindex{
28  position: absolute;
29  top: 0;
30  left: 0;
31  z-index: 99;
32/* background: #06067a; */
33  background: #10107a;
34  border-bottom: none;
35 }
36.zindex tr th{
37  border-bottom: none;
38 }
39.table_main thead th {
40  font-weight: 300;
41  table-layout: fixed;
42  box-sizing: border-box;
43 }
44.table_main tbody.hei{
45  height: 352px;
46 }
47.table_main tbody {
48  display: block;
49  width: 100%;
50  background: rgba(6, 6, 122, 0.6);
51/* height: 352px; */
52/* 隐藏滚动条兼容 */
53  -ms-scroll-chaining: chained;
54  -ms-content-zooming: zoom;
55  -ms-scroll-rails: none;
56  -ms-content-zoom-limit-min: 100%;
57  -ms-content-zoom-limit-max: 500%;
58/* -ms-scroll-snap-type: proximity; */
59  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
60  -ms-overflow-style: none;
61  overflow-y: scroll;
62/* ⽕狐 */
63  scrollbar-width: none;
64/* ie */
65  -ms-overflow-style: none;
66 }
67.table_main tbody::-webkit-scrollbar {
68  display: none;
69 }
70.table_main tbody tr {
71  display: table;
72  table-layout: fixed;
73  width: 100%;
74 }
75.table_main tbody tr td {
76  vertical-align: middle;
77  overflow: hidden;
78  text-overflow: ellipsis;
79  white-space: nowrap;
80 }
81.box2 .coll1{
82  width: 6%;
83 }
84.box2 .coll2{
85  width: 6%;
86 }
87.box2 .coll3{
88  width: 6%;
89 }
90.box2 .coll4{
91  width: 10%;
92 }
93.box2 .coll5{
94  width: 14%;
95 }
96.box2 .coll6{
97  width: 18%;
98 }
99.box2 .coll7{
100  width: 12%;
101 }
102.box2 .coll8{
103  width: 12%;
104 }
105.box2 .coll9{
106  width: 6%;
107 }
108.anim{
109  transition: all 0.5s;
110  margin-top: -32px;
111 }
112
114  color: #ff0000;
115 }
117  color: #ffcc00;
118 }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。