您好,登錄后才能下訂單哦!
這篇文章主要介紹“avue如何實(shí)現(xiàn)自定義搜索欄及清空搜索事件”,在日常操作中,相信很多人在avue如何實(shí)現(xiàn)自定義搜索欄及清空搜索事件問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”avue如何實(shí)現(xiàn)自定義搜索欄及清空搜索事件”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
對(duì)搜索欄進(jìn)行自定義,并通過按鈕實(shí)現(xiàn)折疊搜索欄效果。自定義效果如下:
折疊前:
折疊后:
其實(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" 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="發(fā)送人:"> <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="發(fā)送時(shí)間:"> <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="結(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" @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" @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" @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 }) },
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)自定義搜索欄及清空搜索事件”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。