ui效果圖
功能分析
? ??支持多選和單選
? ??支持分頁查詢
? ??支持搜索
代碼實現(xiàn)
? ??TS類型
? ??????屬性說明
? ??????代碼實現(xiàn)
? ? ? ? ? ? ? ? 需要把ajax請求內(nèi)置進(jìn)來，當(dāng)分頁的時候自動去請求加載數(shù)據(jù)奢入。我這里定義了兩個hook來做這件事，一個來處理分頁毯欣，一個來處理請求
? ? ? ? ? ? ? ? useRequest：在這里完成后端請求并返回吃型，包括一個loading效果
? ??????????????useScroll：這個說起來挺坑的唧瘾，第一次我直接寫在了函數(shù)內(nèi)部，這樣就無法把添加的事件remove掉缨该，后來我就加了個useCallback偎行，但是把page傳進(jìn)去的時候發(fā)現(xiàn)還是非同一引用，故最后用useRef又包了一層
? ? ? ? ? ? 這樣就只需要當(dāng)分頁的page變化時贰拿，傳給useRequest即可
? ??????????????支持單選和多選--multiple屬性
? ? ? ? ? ? 對于頁面而言只是高亮效果蛤袒，因此只需要對組件內(nèi)的狀態(tài)進(jìn)行處理：單選就每次清空后push，多選就每次push膨更，當(dāng)然也需要考慮當(dāng)前點擊是否已經(jīng)是高亮妙真，高亮則取消
? ??????????????篩選要支持實時或僅點擊搜索圖標(biāo)--trigger屬性
? ? ? ? ? ? 實時的時候肯定是要考慮防抖的，一開始我是自己寫了一個的荚守，但是在review代碼的時候被指出可能有潛在的問題（我覺得這多少有點吹毛求疵）珍德，就換成了ahooks的useDebance函數(shù)
? ??????????????????處理數(shù)據(jù)顯示--rowKey和refactoryItem
? ? ? ? ? ? 當(dāng)其他人使用的時候练般，到底應(yīng)該怎么顯示，這肯定不能由咱內(nèi)置锈候，故需要外部提供一個api薄料，咱在內(nèi)部遍歷數(shù)據(jù)時回調(diào)他，并獲取外部處理過的數(shù)據(jù)
? ??????????????????要想更通用一些泵琳，肯定不能都是由ajax接口回填數(shù)據(jù)摄职，也必須支持外部傳入--data
? ? ? ? ? ? 外部的數(shù)據(jù)肯定是不能走useRequest，為了保證程序不至于隨處報錯，所以要寫一個函數(shù)對數(shù)據(jù)進(jìn)行下校驗，并實時反饋給外部
效果
后續(xù)使用的bug記錄如下
useRequest的bug
? ? 分頁后再搜索會累加
useScroll的bug
? ? 沒有防抖函數(shù)贞铣，且上拉到底的判斷有時候會不準(zhǔn)，且沒有提供page回退
