vue table大屏自動重新整理滾動效果

1.樣式：thead頭部固定，tbody滾動，動態給tbody加動畫效果

2.資料：計時器更改資料變化，每次陣列尾部新增第乙個元素this.tabledata.push(this.tabledata[0])，再去除第乙個元素this.tabledata.shift()

3.判斷重新整理資料:this.tabledata[0].id === this.endid滾動的陣列第乙個元素等於原始陣列最後乙個時，請求後台重新整理資料，清清除計時器

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>
14tr
>
15thead
>
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>
27tr
>
28thead
>
29<
tbody 
:class
="">
30<
tr v-for
="(item, index) in tabledata"
:key
="index"
:class
="">
31<
td class
="coll1"
:title
="item.code"
>}
td>
32<
td class
="coll2"
:title
="item.isurgentname"
>}
td>
33<
td class
="coll3"
:title
="item.gdstatusname"
>}
td>
34<
td class
="coll4"
:title
="item.deptname"
>}
td>
35<
td class
="coll5"
:title
="item.items"
>}
td>
36<
td class
="coll6"
:title
="item.palce"
>}
td>
37<
td class
="coll7"
:title
="item.remarks"
>}
td>
38<
td class
="coll8"
:title
="item.distributetime"
>}
td>
39<
td class
="coll9"
:title
="item.username"
>}
td>
40tr
>
41tbody
>
42table
>
43div
>

1

data () 
9   },

1

created () ,

1

getlist ()  else
13})
14     },

scroll () 

}, 500)
}

1

.box2
8.table_main
15.table_main tr
18.table_main thead 
27.zindex
36.zindex tr th
39.table_main thead th 
44.table_main tbody.hei
47.table_main tbody 
67.table_main tbody::-webkit-scrollbar 
70.table_main tbody tr 
75.table_main tbody tr td 
81.box2 .coll1
84.box2 .coll2
87.box2 .coll3
90.box2 .coll4
93.box2 .coll5
96.box2 .coll6
99.box2 .coll7
102.box2 .coll8
105.box2 .coll9
108.anim
112113
.red
116.yellow

react骨架屏自動生成 移動端骨架屏自動生成方案

找到這裡的同志，或多或少都對骨架屏有所了解，請容許我先囉嗦一句。骨架屏 skeleton screen 是一種優化使用者弱網體驗的方案，可以有效緩解使用者等待的焦躁情緒。tabanimated是提供給ios開發者自動生成骨架屏的一種解決方案。開發者可以將已經開發好的檢視，通過tabanimated配...

FR大屏展示

frm是表單，決策報表。cpt是普通報表。大屏用的是決策報表 比較 表單可以區域性重新整理，自適應，元件之間聯動，單獨使用控制項。大屏價值 乙個汽車大屏案例 展現公司實力 課前安裝兩個外掛程式 jar包所在路徑 fr home webreport web inf lib和 fr home lib 外...

大屏模板製作

設計大屏駕駛艙遵循四個基本步驟 布局排版 色彩 點綴效果 動畫。業務部門的需求，是要重點展現集團銷售總額資料以及各地區的資料，其他次要內容包括歷年銷售對比 各產品線銷售 熱門產品 實時交易 新老客戶佔比等。我們從常見的幾種主次分布排版樣式裡挑選了一種作為此次的版面，如下圖所示 由於集團業務遍布全國，...