章節連結
PrimeVue4 之 DataTable 元件,在過往的版本是有 responsive-layout 選項可選,可惜如今已被取消。小尺寸螢幕瀏覽使用水平滾軸,在實務上對使用者不慎友善。因此這篇提供一個簡易的實作版本。雖與原版提供的多樣功能定有落差,但小螢幕能用的空間有限,有些功能被捨棄自覺也算合理。
內容
發想
根據 PrimeVue4 所提供的文件,Slots 中有提供 update: 開頭的項目,就是可用 v-model 來進行雙向綁定的值。手機版本僅讓 first,
sort-field 和 sort-order 可雙向綁定修改即可。
CardModeTable.vue
根據外部傳入的值,自行實作「分頁」&「排序」邏輯。基本上利用 vue 所提供的 computed 監聽 props 變化來改變值,其實就完成一大半了。另外要補上 「回上頁」和「回下頁」的方法
按讚加入粉絲團