avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐
更新時(shí)間：2021年12月12日 11:33:15 作者：指標(biāo)滿載
本文主要介紹了avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐，主要包括對(duì)搜索欄進(jìn)行自定義，并通過(guò)按鈕實(shí)現(xiàn)折疊搜索欄效果，具有一定的參考價(jià)值，感興趣的可以了解一下
對(duì)搜索欄進(jìn)行自定義，并通過(guò)按鈕實(shí)現(xiàn)折疊搜索欄效果。自定義效果如下：
折疊前：
折疊后：
1、自定義搜索欄內(nèi)容
其實(shí)也簡(jiǎn)單，只要在對(duì)應(yīng)的vue文件中\(zhòng)src\views\admin\sysxxfsjl.vue對(duì)template 設(shè)置slot-scope="scope"和 slot="search"屬性即可自定義搜索欄內(nèi)容：
<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="發(fā)送人：">
<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="發(fā)送時(shí)間：">
<el-date-picker
style="width: 238px !important; margin-left: -100px"
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="開(kāi)始日期"
end-placeholder="結(jié)束日期"
:picker-options="pickerOptions"
@change="getList()">
</el-date-picker>
</el-form-item>
<el-form-item label="方式：" >
<el-radio-group v-model="searchForm.fsfs" size="small" style="margin-left: -100px" @change="getList()">
<el-radio-button label="4">系統(tǒng)消息</el-radio-button>
<el-radio-button label="1">手機(jī)短信</el-radio-button>
<el-radio-button label="3">微信發(fā)送</el-radio-button>
</el-radio-group>
</el-form-item>
</el-row>
<el-row v-show="moreshow">
<el-form-item label="閱讀狀態(tài)：">
<el-radio-group v-model="sfyd" size="small" style="margin-left: -100px;width: 238px" @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="是否轉(zhuǎn)待辦：">
<el-radio-group v-model="checkList" style="margin-left: -100px" @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>
搜索按鈕 調(diào)用的是getList中的方法，給表格賦值數(shù)據(jù)
getList(page, params) {
this.tableData=[]
if (this.timeSlot && this.timeSlot.length == 2) {//發(fā)送時(shí)間
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){//發(fā)送人
this.searchForm.fsrid = this.fsrid[this.fsrid.length-1]
}else {
delete this.searchForm.fsrid
}
if (this.sfyd.length>0){//是否轉(zhuǎn)待辦
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!=''){//是否轉(zhuǎn)待辦
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
})
},
2、自定義搜索按鈕
template 設(shè)置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>
更多、隱藏按鈕調(diào)用方法對(duì)搜索項(xiàng)進(jìn)行顯隱
getmoreshow(type){
if(type==1){
this.moreshow=false
}else{
this.moreshow=true
}
},
清空按鈕 需在avue-crud上增加@search-reset事件。進(jìn)行清空選項(xiàng)內(nèi)容并調(diào)用this.getList(this.page);
//搜索清空按鈕事件
searchReset(){
this.searchForm = {}
this.searchForm.sfyd = ''
if (this.searchForm.sfyd!=''){//是否轉(zhuǎn)待辦
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);
},
到此這篇關(guān)于avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐的文章就介紹到這了,更多相關(guān)avue 自定義搜索欄及清空搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.js單頁(yè)面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了vue.js單頁(yè)面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)，使用單頁(yè)應(yīng)用，沒(méi)有頁(yè)面切換，就沒(méi)有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。2017-04-04
前端Vue.js實(shí)現(xiàn)json數(shù)據(jù)導(dǎo)出到doc
這篇文章主要介紹了前端Vue.js實(shí)現(xiàn)json數(shù)據(jù)導(dǎo)出到doc，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家介紹了Javascript對(duì)象及Proxy工作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue3.0+vue-router+element-plus初實(shí)踐
這篇文章主要介紹了vue3.0+vue-router+element-plus初實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue富文本框（插入文本、圖片、視頻）的使用及問(wèn)題小結(jié)
這篇文章主要介紹了vue富文本框（插入文本、圖片、視頻）的使用及問(wèn)題小結(jié),需要的朋友可以參考下2018-08-08
Pinia 是2019年由vue.js官方成員重新設(shè)計(jì)的新一代狀態(tài)管理庫(kù),類似Vuex,下面我們就來(lái)學(xué)習(xí)一下如何通過(guò)Pinia實(shí)現(xiàn)持久化存儲(chǔ)的相關(guān)知識(shí),感興趣的小伙伴可以了解下2023-12-12
Vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車小案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
在vue中實(shí)現(xiàn)禁止回退上一步,路由不存歷史記錄
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止回退上一步,路由不存歷史記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
解決ant design vue中樹(shù)形控件defaultExpandAll設(shè)置無(wú)效的問(wèn)題
這篇文章主要介紹了解決ant design vue中樹(shù)形控件defaultExpandAll設(shè)置無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
前端使用vue實(shí)現(xiàn)token無(wú)感刷新的三種方案解析
這篇文章主要為大家介紹了前端使用vue實(shí)現(xiàn)token無(wú)感刷新的三種方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06