ant design vue 表頭自定義篩選

2021-10-23 07:43:42 字數 733 閱讀 7069

這是後端同事給我提的優化。。。其實搜尋裡面已經有這一搜尋條件了,我不知道為啥還要加乙個。

那既然提了,就得想辦法實現。然後我找了官方文件。

這是官方**給的示例及**:

怎麼說**還是挺晦澀難懂的,而且還沒有注釋。所以還得借助度娘。簡單說,官方文件裡還是借助column中onfilter方法進行篩選的,但是我這列是編碼經過轉譯展現在前端的。所以我的想法是借助它的樣式,然後繫結乙個函式,實現自定義搜尋。

當時找到乙個部落格,注釋還挺詳細的。

位址點【這裡】

column中的

部落格中記錄的如下所示:

table中定義的input,其中繫結的搜尋方法修改如下:

主要思路就是遍歷datasource模糊匹配,然後將匹配到的資料push到datasourcecopy中,最後將datasource = datasourcecopy。

前端匹配的,

1、可以考慮indexof()方法

2、借助 regexp物件和match 方法。

效果如下:

ant design vue使用記錄

可能的原因有兩個,一是在表單還未渲染完成就向其傳值,導致報錯。二是利用this.setfieldsvalue value 設定值時傳遞了多餘表單項。解決第一點 使用 this.nexttick 解決第二點 刪除多餘的屬性 由於介面返回的狀態碼不同,需要根據狀態碼提示使用者。這裡用到notificat...

ant design vue專案實戰

一 要求vue cli版本3.0以上,首先公升級至3.0以上,然後vue create antd demo即可 二 專案發布,使用npm run build打包,router去掉history模式,自建vue.config.js檔案,設定如下規則 publicpath 預設 部署應用包時的基本 ur...

ant design vue 問題記錄

解決方法 翻頁change事件獲取了列表之後,手動將scrolltop設為0 async handletablechange pagination 場景為採用tabs切換選擇,但是內容和tabs分離,就是a tab pane標籤內容是空的,切換tabs時如果有進行非同步請求,tabs下面的滑塊會有抖...