vue element 頁面資料（千條）優化

問題：頁面要求展示3000條資料，不允許分頁時，頁面操作卡頓問題

思路：1.動態展示部分資料，即只展示可視區域資料，比如10-20條資料；

2.使用者滾動檢視時替換當前展示的資料；

3.通過slice獲取當前應展示的資料（arr.slice(startindex,endindex)）;

4.增加滾動元素的padingtop、padingbottom 保證資料一直在檢視中；

直接上**，詳情請看注釋

js**

export
default}}
,	watch:},
methods:
this
.*****scrollset.paddingbottom =
this
.*****scrollset.allheight -
300- top;
//300為可視高度},
},computed()
,style()
},},
}

vue檔案 迴圈的是scrolllist這個變數 ，style 滾動時改變

class

="el-linkage-box"
ref="container"
@scroll
="*****scroll()"
>
v-if
="list&&list.length>0"
:style
="style
">
v-for
="(item,i) in scrolllist"
:key
="item.id"
@click
="getlayout(item,i,$event)"
:class=""
>
@change
="change(item,i,$event)"
v-model
="value"
:label
="item.id"
>
el-checkbox
>
>
}span
>
class
="el-icon-arrow-right"
style
="font-size
:12px
">
i>
li>
ul>
v-else
>
style
="text-align
:center
">
暫無資料li
>
ul>
div>
div>

Vue Element 頁面載入功能的簡單實現

話不多說，直接上 參考鏈結 element 提供了兩種呼叫 loading 的方法 指令和服務。以下 是以服務的方式呼叫loading 在 request.js 檔案中引入外掛程式模組 import from element ui loading 需要覆蓋的 dom 節點，我想讓載入區域只在 el ...

VUE Element學習筆記之登入頁面跳轉首頁

要求 使用vue elementui 對使用者帳號 密碼進行驗證 登入功能 登入後跳轉到首頁 使用者退出登入 退出登入返回到登入頁面 基於elementui前端模版 vuetify material dashboard master 編輯登入頁面 登入登入成功後的首頁，views dashboard...

vue element 彈窗子元件的資料重新渲染

element的彈窗是用display來控制的，dom元素只是被隱藏掉了，但是我想每次開啟彈窗，使得彈窗內顯示不同的值 彈窗資料通過http請求獲得 彈窗子元件使用 ref detaildialog dialogtablevisible dialogtablevisible table中開啟彈窗 c...