avue实现⾃定义搜索栏及清空搜索事件的实践⽬录
1、⾃定义搜索栏内容
2、⾃定义搜索按钮
对搜索栏进⾏⾃定义，并通过按钮实现折叠搜索栏效果。⾃定义效果如下：
折叠前：
折叠后：
1、⾃定义搜索栏内容
其实也简单，只要在对应的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="bt" @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()">
htmlradio添加切换事件
<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, ' ')
dTime = this.timeSlot[1].replace(/\+/g, ' ')
}else {
delete this.searchForm.startTime
delete dTime
}
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.ds.length;i++){
response.ds[i].checkbox=[]
if(response.ds[i].sfyd==0){
response.ds[i].checkbox.push(' 未读')
}else{
response.ds[i].checkbox.push(' 已读')
}
if(response.ds[i].sfdb==1){
response.ds[i].checkbox.push(' 待办')
}
if(response.ds[i].sfsc==1){
response.ds[i].checkbox.push(' 收藏')
}
if(response.ds[i].sfhf==1){
response.ds[i].checkbox.push(' 已回')
}
if(response.ds[i].xxfjmc){
response.ds[i].xxfjmc=response.ds[i].xxfjmc.split(',')
}else{
response.ds[i].xxfjmc=[]
}
this.tableData.push(response.ds[i])
}
al = response.al
this.tableLoading = false
}).catch(() => {
this.tableLoading=false
})
},
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){
}else{
}
},
清空按钮需在avue-crud上增加@search-reset事件。进⾏清空选项内容并调⽤List(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.$leSelection();
},
到此这篇关于avue实现⾃定义搜索栏及清空搜索事件的实践的⽂章就介绍到这了，更多相关avue ⾃定义搜索栏及清空搜索内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。