avue如何实现自定义搜索栏及清空搜索事件

这篇文章主要介绍"avue如何实现自定义搜索栏及清空搜索事件"，在日常操作中，相信很多人在avue如何实现自定义搜索栏及清空搜索事件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"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如何实现自定义搜索栏及清空搜索事件"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！