Table元件構建過程中遇到的問題與解決思路

2022-09-23 19:18:09 字數 1002 閱讀 5179

在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 隱藏輪動條scrollbar,但也可以進行滾動。此方法有缺陷,第一是僅適用於chrome核心的瀏覽器;第二是無法使用滑鼠指標來拖動scrollbar。後來由於寬度是使用者自己傳遞的值,因此也不會再引起輪動條scrollbar含有寬度讓樣式變形的問題

其他table元件是乙個較為複雜的元件,因為需要考慮到的要素和使用場景過多,在設計元件的同時也要兼顧到哪些屬性是否可以作為使用者傳遞,哪一些則不需要讓使用者自己傳遞。目前該元件的大致功能已經完成,細節仍在完善。

構建fabMap過程中可能遇到的錯誤

1.when opencv2.4.9 is not installed,the system has opencv2.4.8 pre installed in usr lib x86 64 linux gnu and usr include,where there is no opencv nonf...

MySQL過程中遇到的問題

my.ini檔案中搜尋mysqld關鍵字,在下面新增skip grant tables 我的my.ini配置如下 client 設定客戶端埠號 port 3306 設定預設資料編碼格式 default character set utf8 mysqld skip grant tables 設定為自己...

使用ArchLinux中過程中遇到的問題

可以到這裡 看本文,效果要好一些 前段時間裝了archlinux,使用了一段時間的kde,不過最終還是換回了gnome。唉!沒堅持住。archlinux安裝gnome直接就裝的gnome3 arch還真是超前 不過,gnome3確實很漂亮!1.在gnome3下使用fcitx 首先確定你安裝了中文字型...