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