VUE element開發後台管理的搜尋功能

2021-09-24 09:23:15 字數 868 閱讀 7552

先看看樣式圖:

實現上面這種簡單搜尋簡單的三步走:

1.頁面樣式:在頁面中使用form表單的校驗功能來實現輸入搜尋。給表單的資料放入搜尋請求的data陣列中,也就是searchparams這個大集合中。

備註:如果給每個輸入框新增了搜尋按鈕的click方法,則會在輸入完成後直接執行列表搜尋。所以考慮自己使用的具體位置。

清空

新建

清空功能則是清空搜尋輸入框的內容,實際上也是重置整個頁面。區分是重新整理頁面還是不重新整理。不重新整理的話直接清空輸入的內容,重置的話直接走一遍列表初始化載入。

2.js配置內容:搜尋和首次載入請求是乙個介面,可以直接將引數合併起來,有搜尋輸入的內容就執行搜尋,無內容則載入預設內容。清空搜尋直接格式化表單。

data () ,,],

searchparams: ,}},

created () ,

methods:

this.axios()

.then(res => )

},// 搜尋列表 num(下同)

submitsearch () ,

// 格式化表單資料

clearform ()

},// 清除列表的搜尋表單

clearlistsearch () ,

3.就是進行調測,對搜尋輸入的引數進行對應,在特定值的情況下 搜尋0或者別的值會被直接傳成空,所以這個時候就要考慮列表請求的引數不寫空,直接填進行搜尋的引數名字。這個引數有就傳沒有就不傳,避免出現為0或者別的值直接傳成空的了。

vue element管理後台

之前沒有用vue element寫過後台,前幾天工作需要直接上手,遇到了很多坑,總結一下 動態修改頁面的屬性不能用點屬性的形式,資料重新整理了但是頁面不會重新渲染。動態的修改物件屬性需要使用 set this.tabledata id red true 錯誤方式 this.set this.tabl...

Vue element admin開發後台管理系統

vue element admin 是乙個後台前端解決方案,它基於 vue 和 element ui實現。它使用了最新的前端技術棧,內建了 i18 國際化解決方案,動態路由,許可權驗證,提煉了典型的業務模型,提供了豐富的功能元件,它可以幫助你快速搭建企業級中後台產品原型。相信不管你的需求是什麼,本專...

python web開發 Django後台管理

django自帶了管理後台,而且非常強大,這個模組是settings.py 中配置的django.contrib.admin應用。我們首先來建立乙個後台管理員使用者,並為其設定密碼。建立賬號 python manage.py createsuperuser會要求我們輸入使用者名稱 郵箱和密碼。建立好...