本發(fā)明涉及軟件開發(fā)，具體涉及一種基于antd的可配置的列表字段篩選方法、裝置及存儲介質(zhì)。
背景技術(shù)：
：：1、在軟件開發(fā)領(lǐng)域，目前存在許多基于react框架的ui組件庫，如ant?design，提供了豐富的可復(fù)用組件用于構(gòu)建用戶界面；在列表數(shù)據(jù)展示和篩選功能方面，通常需要編寫大量重復(fù)的代碼來實現(xiàn)列表的字段篩選功能，這不僅工作量大，還不易維護(hù)和擴展。技術(shù)實現(xiàn)思路1、有鑒于此，本發(fā)明的目的在于提供一種基于antd的可配置的列表字段篩選方法、裝置及存儲介質(zhì)，以解決現(xiàn)有技術(shù)中，在列表數(shù)據(jù)展示和篩選功能方面，通常需要編寫大量重復(fù)的代碼來實現(xiàn)列表的字段篩選功能，這不僅工作量大，還不易維護(hù)和擴展的問題。2、根據(jù)本發(fā)明實施例的第一方面，提供一種基于antd的可配置的列表字段篩選方法，所述方法包括：3、引入ant?design框架，并應(yīng)用其中的table配置對應(yīng)的列表項columns；4、對所述列表項columns進(jìn)行擴展；5、創(chuàng)建getcolumnsfiltersprops函數(shù)，使用所述getcolumnsfiltersprops函數(shù)對擴展后的列表項columns進(jìn)行配置，定義需要展示的列表字段。6、優(yōu)選地，7、所述對所述列表項columns進(jìn)行擴展包括：8、創(chuàng)建一個函數(shù)getcolumnsfiltersprops；9、通過所述函數(shù)getcolumnsfiltersprops返回所述列表項columns的元素中的filterdropdown以及filtericon，實現(xiàn)列表項columns的擴展。10、優(yōu)選地，11、所述定義需要展示的列表字段包括：12、在配置文件中定義需要展示的字段checkoptions和defaultcheckedvalue，以及對應(yīng)的篩選后的處理函數(shù)onchange。13、優(yōu)選地，14、所述getcolumnsfiltersprops函數(shù)接收的參數(shù)包括：15、checkoptions、defaultcheckedvalue以及onchange；16、所述checkoptions為可篩選列表，所述可篩選類別包含子篩選項；17、所述defaultcheckedvalue為默認(rèn)選中的篩選項；18、所述onchange為篩選后的確認(rèn)處理。19、優(yōu)選地，20、所述在配置文件中定義需要展示的字段checkoptions和21、defaultcheckedvalue，以及對應(yīng)的篩選后的處理函數(shù)onchange包括：22、通過所述getcolumnsfiltersprops函數(shù)返回所述列表項columns的元素中的filterdropdown，所述列表項columns的元素中的filterdropdown返回一個列表篩選面板filterpanel組件；23、所述列表篩選面板filterpanel組件包含頭部的搜索輸入框、中間的篩選項列表以及底部的操作按鈕。24、優(yōu)選地，25、當(dāng)用戶在所述頭部的搜索輸入框中輸入字段時，所述中間的篩選列表項根據(jù)checkoptions和defaultcheckedvalue展示對應(yīng)的文案、勾選狀態(tài)以及二級篩選菜單；26、當(dāng)用戶點擊底部的操作按鈕中的確認(rèn)操作按鈕時，觸發(fā)onchange，所述table顯示篩選后的數(shù)據(jù)。27、根據(jù)本發(fā)明實施例的第二方面，提供一種基于antd的可配置的列表字段篩選裝置，所述裝置包括：28、配置模塊：用于引入ant?design框架，并應(yīng)用其中的table配置對應(yīng)的列表項columns；29、擴展模塊：用于對所述列表項columns進(jìn)行擴展；30、展示模塊：用于創(chuàng)建getcolumnsfiltersprops函數(shù)，使用所述getcolumnsfiltersprops函數(shù)對擴展后的列表項columns進(jìn)行配置，定義需要展示的列表字段。31、根據(jù)本發(fā)明實施例的第三方面，提供一種存儲介質(zhì)，所述存儲介質(zhì)存儲有計算機程序，所述計算機程序被主控器執(zhí)行時，實現(xiàn)上述方法中的各個步驟。32、本發(fā)明的實施例提供的技術(shù)方案可以包括以下有益效果：33、本申請通過引入ant?design框架，并應(yīng)用其中的table配置對應(yīng)的列表項columns；對列表項columns進(jìn)行擴展；創(chuàng)建getcolumnsfiltersprops函數(shù)，使用getcolumnsfiltersprops函數(shù)對擴展后的列表項columns進(jìn)行配置，定義需要展示的列表字段；本申請通過提供可配置的列表字段篩選面板，能夠大幅度減少代碼編寫量，提高開發(fā)效率，同時也提高代碼的可維護(hù)性和擴展性，通過配置文件的方式，使開發(fā)人員能夠靈活地定制列表的字段篩選功能，滿足不同場景下的需求。34、應(yīng)當(dāng)理解的是，以上的一般描述和后文的細(xì)節(jié)描述僅是示例性和解釋性的，并不能限制本發(fā)明。技術(shù)特征：1.一種基于antd的可配置的列表字段篩選方法，其特征在于，所述方法包括：2.根據(jù)權(quán)利要求1所述的方法，其特征在于，3.根據(jù)權(quán)利要求2所述的方法，其特征在于，4.根據(jù)權(quán)利要求3所述的方法，其特征在于，5.根據(jù)權(quán)利要求4所述的方法，其特征在于，6.根據(jù)權(quán)利要求5所述的方法，其特征在于，7.一種基于antd的可配置的列表字段篩選裝置，其特征在于，所述裝置包括：8.一種存儲介質(zhì)，其特征在于，所述存儲介質(zhì)存儲有計算機程序，所述計算機程序被主控器執(zhí)行時，實現(xiàn)如權(quán)利要求1-6任一項所述的一種基于antd的可配置的列表字段篩選方法中的各個步驟。技術(shù)總結(jié)本發(fā)明涉及一種基于antd的可配置的列表字段篩選方法、裝置及存儲介質(zhì)，應(yīng)用于軟件開發(fā)
技術(shù)領(lǐng)域：
：，包括：通過引入Ant?Design框架，并應(yīng)用其中的Table配置對應(yīng)的列表項columns；對列表項columns進(jìn)行擴展；創(chuàng)建getColumnsFiltersProps函數(shù)，使用getColumnsFiltersProps函數(shù)對擴展后的列表項columns進(jìn)行配置，定義需要展示的列表字段；本申請通過提供可配置的列表字段篩選面板，能夠大幅度減少代碼編寫量，提高開發(fā)效率，同時也提高代碼的可維護(hù)性和擴展性，通過配置文件的方式，使開發(fā)人員能夠靈活地定制列表的字段篩選功能，滿足不同場景下的需求。技術(shù)研發(fā)人員：方浩銘,高斌,鄒瓊,周雙全受保護(hù)的技術(shù)使用者：深圳市瑞云科技股份有限公司技術(shù)研發(fā)日：技術(shù)公布日：2025/1/9