avue實現自定義搜尋欄及清空搜尋事件的實踐
阿新 • • 發佈：2021-12-14
目錄
- 1、自定義搜尋欄內容
- 2、自定義搜尋按鈕
對搜尋欄進行自定義，並通過按鈕實現摺疊搜尋欄效果。自定義效果如下：
摺疊前：
摺疊後：
1、自定義搜尋欄內容
其實也簡單，只要在對應的檔案中\src\views\admin\sysxxfsjl.vue對template 設定slot-scope="scope"和 slot="search"屬性即可自定義搜尋欄內容：
<template slot-scope="scope" slot="search">
<el-form ref="form" :model="searchForm" style="width: 830px;margin-left: -10px; display: inline-block;" label-width="100px">
<el-row>
<el-form-item label="主題：">
<el-input v-model="searchForm.xxbt" style="width: 238px;margin-left: -100px" @change="getList()"></el-input>
</el-form-item>
<el-form-item label="傳送人：">
<el-cascader
v-model="fsrid"
:options="options"
clearable
style="width: 242px !important;margin-left: -100px"
:props="{ expandTrigger: 'hover' }"
@change="getList()"></el-cascader>
</el-form-item>
</el-row>
<el-row v-show="moreshow">
<el-form-item label="傳送時間：">
<el-date-picker
style="width: 238px !important; margin-left: -100px"
v-model="timeSlot"
type="daterange"
搜尋按鈕 呼叫的是getList中的方法，給表格賦值資料
getList(page,params) {
this.tableData=[]
if (this.timeSlot && this.timeSlot.length == 2) {//傳送時間
this.searchForm.startTime = this.timeSlot[0].replace(/\+/g,' ')
this.searchForm.endTime = this.timeSlot[1].replace(/\+/g,' ')
}else {
delete this.searchForm.startTime
delete this.searchForm.endTime
}
if (this.fsrid.length){//傳送人
this.searchForm.fsrid = this.fsrid[this.fsrid.length-1]
}else {
delete this.searchForm.fsrid
}
if (this.sfyd.length>0){//是否轉待辦
if (this.sfyd== 1){
this.searchForm.sfyd = 1
}else if (this.sfyd== 0){
this.searchForm.sfyd = 0
}else {
delete this.searchForm.sfyd
}
}else {
delete this.searchForm.sfyd
}
if (this.checkList!=''){//是否轉待辦
if (this.checkList== '1'){
this.searchForm.sfdb = 1
}else {
this.searchForm.sfdb = 0
}
}else {
delete this.searchForm.sfdb
}
if (!page) {
page = this.page
}
this.tableLoading = true
fetchList(Object.assign({
cuwww.cppcns.com
2、自定義搜尋按鈕
template 設定slot-scope="scope"和 slot="searchMenu"屬性即可自定義搜尋按鈕，加上更多按鈕：
<template slot-scope="scope" slot="searchMenu">
<el-button v-if="moreshow" type="success" class="el-button--small" icon="el-icon-caret-top" @click="getmoreshow(1)">隱藏</el-button>
<el-button v-else class="el-button--small" icon="el-icon-caret-bottom" @click="getmoreshow(2)">更多</el-button>
</template>
更多、隱藏按鈕呼叫方法對搜尋項進行顯隱
getmoreshow(type){
if(type==1){
this.moreshow=false
}else{
this.moreshow=true
}
},
清空按鈕 需在avue-crud上增加@search-reset事件。進行清空選項內容並呼叫this.getLishttp://www.cppcns.comt(this.page);
//搜尋清空按鈕事件
searchReset(){
this.searchForm = {}
this.searchForm.sfyd = ''
if (this.searchForm.sfyd!=''){//是否轉待辦
if (this.searchForm.sfyd== '1'){
this.searchForm.sfyd = 1
}else {
this.searchForm.sfyd = 0
}
}else {
delete this.searchForm.sfyd
}
this.fsrid = []
this.timeSlot = []
this.checkList = ''
this.sfyd = ''
this.$refs.crud.toggleSelection();
this.getList(this.page);
},
到此這篇關於avue實現自定義搜尋欄及清空搜尋事件的實踐的文章就介紹到這了,更多相關avue 自定義搜尋欄及清空搜尋內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！