[筆記] Vue3 Element Plus 前端分頁、排序和搜尋邏輯

章節連結

Vue3 上知名的前端框架 Element Plus,若要達成純前端資料表的分頁、排序和搜尋邏輯,你必須要自己組裝並撰寫相關邏輯才能利用。這邊筆記下組合的過程和相關邏輯。
element ui ElementUI


概念

1. 本體上,分頁、排序和搜尋的變數是會交互影響的,所以可以定義一個物件來記錄初始條件,再用深拷貝的方法來當做 ref 的變數
2. 你會在一開始從後端獲得「全部的值」,獲得後將其存入一個 ref 變數存放
3. 關鍵字輸入框請獨立使用一個變數,視情況再傳入搜尋條件變數中
4. 進行「搜尋」時,要留下的「排序條件」和「每頁顯示 N 筆」的設定值
5. 進行「排序」時,要留下獲得的「排序條件」以及「每頁顯示 N 筆」和「關鍵字」設定值
6. 由於觸發 pagination 後,並不會獲得過往的排序條件。因此要透過判斷你的搜尋條件中,有沒有排序條件來判定
7. 「關鍵字搜尋」:用 Array.filter() 達成
8. 「排序邏輯」:需要撰寫 compare 的邏輯,可以用此篇 element ui表格排序只排了当前页,想要排整个数据要怎么做,求支招 的方法參考

程式碼

按讚加入粉絲團

延伸閱讀