avue框架表格实现自定义搜索栏，即清空搜索事件

朴灿烈づ我的快乐病毒、 2023-06-19 01:58 3阅读 0赞

对搜索栏进行自定义，并通过按钮实现折叠搜索栏效果。自定义效果如下：  
折叠前：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
折叠后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

## 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<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 设置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);  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]

//搜索清空按钮事件
                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);
                },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203165004810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191203164931174.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191203170044641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70