先看看樣式圖:
實現上面這種簡單搜尋簡單的三步走:
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會要求我們輸入使用者名稱 郵箱和密碼。建立好...