溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“avue如何實現自定義搜索欄及清空搜索事件”，在日常操作中，相信很多人在avue如何實現自定義搜索欄及清空搜索事件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”avue如何實現自定義搜索欄及清空搜索事件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
對搜索欄進行自定義，并通過按鈕實現折疊搜索欄效果。自定義效果如下：
折疊前：
折疊后：
其實也簡單，只要在對應的vue文件中\src\views\admin\sysxxfsjl.vue對template 設置slot-scope="scope"和 slot="search"屬性即可自定義搜索欄內容：
<template slot-scope="scope" slot="search">
<el-form ref="form" :model="searchForm" label-width="100px">
<el-row>
<el-form-item label="主題：">
<el-input v-model="searchForm.xxbt" @change="getList()"></el-input>
</el-form-item>
<el-form-item label="發送人：">
<el-cascader
v-model="fsrid"
:options="options"
clearable
:props="{ expandTrigger: 'hover' }"
@change="getList()"></el-cascader>
</el-form-item>
</el-row>
<el-row v-show="moreshow">
<el-form-item label="發送時間：">
<el-date-picker
v-model="timeSlot"
type="daterange"
align="right"
unlink-panels
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結束日期"
:picker-options="pickerOptions"
@change="getList()">
</el-date-picker>
</el-form-item>
<el-form-item label="方式：" >
<el-radio-group v-model="searchForm.fsfs" size="small" @change="getList()">
<el-radio-button label="4">系統消息</el-radio-button>
<el-radio-button label="1">手機短信</el-radio-button>
<el-radio-button label="3">微信發送</el-radio-button>
</el-radio-group>
</el-form-item>
</el-row>
<el-row v-show="moreshow">
<el-form-item label="閱讀狀態：">
<el-radio-group v-model="sfyd" size="small" @change="getList()">
<el-radio-button label="2">所有</el-radio-button>
<el-radio-button label="1">已讀</el-radio-button>
<el-radio-button label="0">未讀</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="是否轉待辦：">
<el-radio-group v-model="checkList" @change="getList()">
<el-radio-button label="1">是</el-radio-button>
<el-radio-button label="0">否</el-radio-button>
</el-radio-group>
</el-form-item>
</el-row>
</el-form>
</template>搜索按鈕 調用的是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({
current: page.currentPage,
size: page.pageSize
}, params, this.searchForm )).then(response => {
for(var i=0;i<response.data.data.records.length;i++){
response.data.data.records[i].checkbox=[]
if(response.data.data.records[i].sfyd==0){
response.data.data.records[i].checkbox.push(' 未讀')
}else{
response.data.data.records[i].checkbox.push(' 已讀')
}
if(response.data.data.records[i].sfdb==1){
response.data.data.records[i].checkbox.push(' 待辦')
}
if(response.data.data.records[i].sfsc==1){
response.data.data.records[i].checkbox.push(' 收藏')
}
if(response.data.data.records[i].sfhf==1){
response.data.data.records[i].checkbox.push(' 已回')
}
if(response.data.data.records[i].xxfjmc){
response.data.data.records[i].xxfjmc=response.data.data.records[i].xxfjmc.split(',')
}else{
response.data.data.records[i].xxfjmc=[]
}
this.tableData.push(response.data.data.records[i])
}
this.page.total = response.data.data.total
this.tableLoading = false
}).catch(() => {
this.tableLoading=false
})
},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.getList(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如何實現自定義搜索欄及清空搜索事件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
