UIUX - 我全都要(選擇全部)的 checkbox 以 vue 為例

Peter Liao

Dreamer

Jul 28, 2021 Published

不知為何搜尋 greedy 全是這名女子

在處理表格或篩選器的時候,我們常可以看見 checkbox 的運用,例如諸多人都必經的 todo list 也可視為表格的一種,它很必然又合理會出現 checkbox。

但你的 todo list 有篩選功能但有全選功能嗎?你的篩選是用分頁做的嗎?

用分頁做的篩選器

如果今天不是 todo list,而是後台要撈資料的頁面,篩選或搜尋條件更多且需要複選,這時候再用分頁試試看,用 checkbox 才能更符合需求、UX 比較好

在做全選 checkbox 時,有查到滿多做法是做成:

  • 點擊全選其他選項有全勾,OK

  • 其中一個取消勾全選跟著不勾,OK

  • 那個被取消的再勾選回來,全選沒有同時跟著被勾回來,這不OK啊!

上 code 了~

這裡稍微帶入貼近實際專案的情況,用v-for去 run,也讓 checkbox 樣式在使用OOCSS時如果要修改不用重複改n次

html

selectAll()如果把勾拿掉,就要把已選取全清空;如果勾起來,就要全部選項塞入(.push()),塞入前要先將 selected 清空,不清空的話會導致塞入重複的值,屆時還要再將重複值篩掉。勾跟不勾都要先清空

updateSelected()同理,一律先把全選的勾清空,發現存在 selected 裡面的選項(被勾選的選項)跟除了全選以外的所有選項數量相等時,就要把全選勾起來

javascript(vue)

看結果

以上就是 checkbox select all 的實例了,之前在查解法時也用看到用 watch完成的,不過要把選項每一個都寫進 watch 去偵聽,後續若還有機會碰到相關開發需求,再試試 watch 解多個選項。歡迎各方工程師們指點討論,感恩感恩

還不吸爆!

Javascript UX Vue checkbox select