在 GearCase 開源項目構建 Table 組件的過程中。遇到了各式各樣的問題，最後嘗試了各種方法去解決這些問題。 遇到的部分問題 checkbox 的全選和半選問題 table 組件的排序請求方法 table 組件固定表頭問題 固定表頭時寬度計算的問題 點擊 icon 排序事件無法觸發的問題 ...
在 GearCase 開源項目構建 Table 組件的過程中。遇到了各式各樣的問題，最後嘗試了各種方法去解決這些問題。
遇到的部分問題
checkbox的全選和半選問題table組件的排序請求方法table組件固定表頭問題- 固定表頭時寬度計算的問題
- 點擊
icon排序事件無法觸發的問題 - 輪動條
scrollbar含有寬度讓樣式變形的問題
解決思路
- 使用
watch監聽選中項，與原始數據進行對比，修改indeterminate的值來顯示checkbox的全選/半選/不選狀態 - 使用點擊
icon圖標來觸發排序事件，排序事件為一個ajax請求，相當於重新請求後端發過來的排序後的新數據，進行渲染即可 - 固定表頭一開始的思路是使用
css來固定table中的thead，達到固定表頭的作用，過程中發現使用單純的css有諸多阻礙，放棄該種思路。轉而使用JS + css的方式。 拷貝一個相同的thead DOM節點並絕對定位的最上方表頭。 - 由於
thead已經不再是以前table組件自身的thead，而是通過拷貝節點複製得到的，因此沒有事件。使用let table2 = this.$refs.table.cloneNode(false)進行克隆，並使用table2.appendChild(thead)重新修改組件自身的thead，這樣就相當於重新擁有的事件。 - 由於表頭固定時的節點是拷貝出來的，因此寬度和原表頭不相同，一開始使用實時計算寬度的方式，後來考慮到性能和複雜度的問題，去除了實時更新計算寬度。改成用戶自己傳寬度值屬性的方式。
- 一開始由於寬度是通過實時計算得到的，會引起輪動條
scrollbar含有寬度讓table組件內部寬度無法和固定表頭對齊的問題。一開始使用::-webkit-scrollbar { width: 0px; }隱藏輪動條scrollbar，但也可以進行滾動。此方法有缺陷，第一是僅適用於Chrome內核的瀏覽器；第二是無法使用滑鼠指針來拖動scrollbar。後來由於寬度是用戶自己傳遞的值，因此也不會再引起輪動條scrollbar含有寬度讓樣式變形的問題
其他
Table 組件是一個較為複雜的組件，因為需要考慮到的要素和使用場景過多，在設計組件的同時也要兼顧到哪些屬性是否可以作為用戶傳遞，哪一些則不需要讓用戶自己傳遞。目前該組件的大致功能已經完成，細節仍在完善。
