vue table大屏自動重新整理滾動效果
阿新 • • 發佈：2020-08-20
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結構
1 <div class="box2"> 2 <tableborder="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="item.code">{{ item.code }}</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="item.remarks">{{ item.remarks }}</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 () { 2 return { 3 timer: '', 4 animate: false, 5 tableData: [], 6 endId: '', 7 isLenght: false 8 } 9 },
1 created () { 2 this.getList() 3 },
1 getList () { 2 listGuarantee().then(res => { 3 console.log('res', res) 4 this.tableData = res.data 5 this.endId = this.tableData[this.tableData.length - 1].id 6 if (this.tableData.length > 10) { 7 this.isLenght = true 8 this.timer = setInterval(this.scroll, 3000) 9 } else { 10 this.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 === this.endId) { // console.log('請求重新整理資料') this.getList() clearInterval(this.timer) } }, 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 113 .red{ 114 color: #ff0000; 115 } 116 .yellow{ 117 color: #ffcc00; 118 }