avue实现自定义搜索栏及清空搜索事件的实践

目录

• 1、自定义搜索栏内容
• 2、自定义搜索按钮

对搜索栏进行自定义，并通过按钮实现折叠搜索栏效果。自定义效果如下：

折叠前：

折叠后：

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 自定义搜索栏及清空搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！