在系統模塊中的業務串列展示里面，一般我們都會在串列中放置一些查詢條件，如果是表欄位不多，大多數情況下，放置的條件有十個八個就可以了，如果是欄位很多，而這些條件資訊也很關鍵的時候，就可能放置很多條件，但是界面空間比較有限，而常規的查詢一般就那么幾個常用條件，如果每次都占用很多版面，好像不是很合理和友好，本篇隨筆探討Vue+Element前端界面中處理高級查詢模塊的界面設計，提供了兩種處理的思路供參考借鑒，
1、彈出框的高級查詢條件的界面設計
如常規的串列界面如下所示，
單擊【高級查詢】彈出一個新對話框視窗，里面可以查看到所有的查詢條件
我們來一段影片效果，操作界面的動態效果如下所示，
這里我為了降低單頁面的代碼量，把高級查詢模塊的代碼抽取到一個獨立的檔案中，然后在主體頁面中引入使用，
<testproduct-advance ref="advancesearch" @search="advanceSearch" />
我們在彈出高級查詢對話框中，執行查詢的時候，會獲得條件物件，然后通過事件的方式給呼叫頁面
async handleSearch() { // 表單提交
this.isVisible = false;
this.$emit('search', this.searchForm)
},
在主頁面里面，會對高級查詢的幾個事件進行處理，如打開視窗，確定高級查詢后觸發查詢，
methods: { advanceSearch(searchObj) { // 高級查詢 // console.log(searchObj) this.advanceSearchForm = searchObj; this.msgSuccess('已選擇高級查詢條件進行查詢了') this.isAdvanceSeach = false // 關閉高級查詢視窗 this.getlist() }, onResetAdvance(searchObj) { // 重置高級查詢條件 // console.log(searchObj) this.advanceSearchForm = searchObj; }, showAdvanceForm() { // 顯示自定義的高級查詢對話框 this.$refs.advancesearch.show() },
在getlist函式里面，需要對高級查詢物件進行轉換處理
getlist() { // 串列資料獲取
// 如果高級查詢物件非空，則采用高級查詢條件
var form = this.isEmpty(this.advanceSearchForm) ? this.searchForm : this.advanceSearchForm;
var param = { // 構造常規的分頁查詢條件
// 分頁條件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize,
// 查詢過濾條件
ProductNo: form.productNo,
BarCode: form.barCode,
MaterialCode: form.materialCode,
ProductType: form.productType,
ProductName: form.productName,
Status: form.status
}
.............
不過，由于高級查詢和普通的查詢界面代碼有很多重復的地方，因此這樣做感覺也相對比較啰嗦，
下面的思路就折疊的方案進行討論，
2、折疊式的高級查詢條件的界面設計
這個思路來自于AntDesign的查詢條件展示，默認它是基于常規條件的展示，如果展開則展示更多的條件，
單擊【展開】則展開更多的條件，以供查詢，
借鑒了這個方式，我們也可以使用這樣的折疊方式來隱藏更多的查詢條件，從而也使得不常用的條件默認隱藏起來，提高界面的友好性，
這樣折疊的條件和不折疊的條件在一個表單里面，只是通過一個狀態的切換隱藏部分條件而已，雖然界面代碼多增加一些，不過處理卻變得簡單一些，不需要單獨撰寫一個高級查詢的條件組件頁面，
界面代碼大致布局如下所示，
這樣我們通過一個條件按鈕來切換它的狀態即可實作常用條件、高級查詢條件的切換顯示了，
<el-button :icon="expandMore ?'el-icon-arrow-up':'el-icon-arrow-down'" type="text" @click="expandMore =!expandMore">{{ expandMore ? '收起':'展開' }}</el-button>
這樣查詢處理，并不需要變化什么特殊的操作了，和常規操作一樣，只不過多一些條件而已，
getlist() { // 串列資料獲取
var param = { // 構造常規的分頁查詢條件
// 分頁條件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize,
// 查詢過濾條件
Name: this.searchForm.name,
Sex: this.searchForm.sex,
.............
State: this.searchForm.state
};
// 使用日期范圍選擇控制元件，在查詢物件增加開始日期CreationTimeStart、結束日期CreationTimeEnd
this.addDateRange(param, this.searchForm.creationTime)
// 獲取串列，系結到模型上，并修改分頁數量
this.listLoading = true
testUser.GetAll(param).then(data => {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
},
以上就是兩種不同高級查詢條件的界面設計，一般來說，我傾向于使用后者來實作，這樣界面效果也比較完整統一，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/227714.html
標籤：其他
下一篇：盒子模型