本文主要介绍了avue实现自定义搜索栏及清空搜索事件的实践，主要包括对搜索栏进行自定义，并通过按钮实现折叠搜索栏效果，具有一定的参考价值，感兴趣的可以了解一下
对搜索栏进行自定义，并通过按钮实现折叠搜索栏效果。自定义效果如下：
折叠前：
折叠后：
1、自定义搜索栏内容
其实也简单，只要在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="search"属性即可自定义搜索栏内容：
系统消息 手机短信 微信发送 所有 已读 未读 是 否
搜索按钮 调用的是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 { this.tableLoading=false }) }, 2、自定义搜索按钮
template 设置slot-scope="scope"和 slot="searchMenu"属性即可自定义搜索按钮，加上更多按钮：
隐藏 更多
更多、隐藏按钮调用方法对搜索项进行显隐
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实现自定义搜索栏及清空搜索事件的实践的文章就介绍到这了,更多相关avue 自定义搜索栏及清空搜索内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是avue实现自定义搜索栏及清空搜索事件的实践的详细内容，更多请关注0133技术站其它相关文章！
