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" style="width: 830px;margin-left: -10px; display: inline-block;" label-width="100px">
                    <el-row>
                      <el-form-item label="主题:">
                        <el-input v-model="searchForm.xxbt" style="width: 238px;margin-left: -100px" @change="getList()"></el-input>
                      </el-form-item>
                      <el-form-item label="发送人:">
                        <el-cascader
                          v-model="fsrid"
                          :options="options"
                          clearable
                          style="width: 242px !important;margin-left: -100px"
                          :props="{ expandTrigger: 'hover' }"
                          @change="getList()"></el-cascader>
                      </el-form-item>
                    </el-row>
                    <el-row v-show="moreshow">
                      <el-form-item label="发送时间:">
                        <el-date-picker
                          style="width: 238px !important; margin-left: -100px"
                          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" style="margin-left: -100px" @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" style="margin-left: -100px;width: 238px" @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" style="margin-left: -100px" @change="getList()">
                          <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, ' ')
                  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"属性即可自定义搜索按钮,加上更多按钮:

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

(0)

相关推荐

  • Vue+Vant实现顶部搜索栏

    本文实例为大家分享了Vue+Vant实现顶部搜索栏的具体代码,供大家参考,具体内容如下 搜索栏组件源码(SearchBar.vue) <template> <section class="city-search"> <van-icon class="search-icon" name="search" /> <input placeholder="在此输入检索关键字" v-model=

  • vue elementui 实现搜索栏公共组件封装的实例代码

    1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日

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

    目录 1.自定义搜索栏内容 2.自定义搜索按钮 对搜索栏进行自定义,并通过按钮实现折叠搜索栏效果.自定义效果如下: 折叠前: 折叠后: 1.自定义搜索栏内容 其实也简单,只要在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="search"属性即可自定义搜索栏内容: <template slot-scope="scope" slot=&q

  • jQuery自定义元素右键点击事件(实现案例)

    大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进.右键后退. 第一步我们要屏蔽浏览器默认的右键点击行为,即阻止弹出框. 首先要将阻止弹出函数绑定到目标元素上: //阻止浏览器默认右键点击事件 $("div").bind("contextmenu", function(){ return false; }) 如此一来,div元素的右击事件就被屏蔽了,而浏览器其

  • Bootstrap 模态框自定义点击和关闭事件详解

    模态框避免点击背景处关闭: 1.div初始化时添加属性 aria-hidden="true" data-backdrop="static" <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true'

  • vue自定义tap指令及tap事件的实现

    1.Vue指令 Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.org/v2/guide/custom-directive.html). 2.v-tap指令实现 我个人的理解,编写指令即是在vue指令对象提供的钩子函数中做相应的逻辑处理,tap指令是在bind钩子函数中做相应的处理, 首先,要明白的是tap是为了处理click事件在iphone上的存在300ms的延时,这样使得连续点击很不流畅,tap

  • vue 实现移动端键盘搜索事件监听

    1.首先注意,input的type="serch" <input @keypress="searchGoods" type="serch" placeholder="搜索商品"> 2.监听keypress事件 (1)KeyDown.KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的.(要解释 ANSI 字符,应使用 KeyPress 事件.) (

  • vue 项目软键盘回车触发搜索事件

    目的:掉起来右下角为搜索的按钮 步骤: 1.input的type改为search,再写keydown按下时的事件调取搜索事件的方法 这样安卓手机上回车就变成了"搜索",不过ios仍然是换行 2.input 外面套form,必须要有action,action="javascript:return true" 我的项目用van:想弹出数字键盘,并监听搜索(换行),在安卓上执行搜索按钮,在ios 执行blur,因为安卓上点完成不执行blur <form @submi

  • pygame 键盘事件的实践

    目录 Pygame事件 事件类型及属性 事件处理函数 键盘事件及类型的使用 键盘事件及属性 什么是事件呢?按下键盘某个按键,鼠标移动,包括点击关闭按钮都可以算是事件操作. Pygame事件 pygame.event.EventType ''' • 事件本质上是一种封装后的数据类型(对象) • EventType是Pygame的一个类,表示事件类型 • 事件类型只有属性,没有方法 • 用户可自定义新的事件类型 ''' 事件类型及属性 事件处理函数 键盘事件及类型的使用 键盘事件及属性 pygame

  • dubbo新手学习之事件通知实践教程

    前言 今天主要给大家分享一下dubbo的事件通知机制. 先看下dubbo中文官网的示例解释:事件通知. 在调用之前.调用之后.出现异常时,会触发 oninvoke.onreturn.onthrow 三个事件,可以配置当事件发生时,通知哪个类的哪个方法. 实践 溪源目的是快速学习dubbo的相关机制,故定义的相同的接口和方法,采用分包的方式解耦合,便于后期维护. 先看服务接口 dubbo-demo-interface 目录如图 ** UserNotifyService ** /** * @auth

  • Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现

    最近跳槽去新公司,接受的第一个任务是在 一个电商模块的搜索功能以及搜索历史记录的实现. 需求和淘宝等电商的功能大体差不多,最上面一个搜索框,下面显示搜索历史记录.在EditText里输入要搜索的关键字后,按软键盘的搜索按键/延迟xxxxms后自动搜索.然后将搜索的内容展示给用户/提示用户没有搜到相关信息. 历史记录是按时间排序的,最新的在前面,输入以前搜索过的关键字,例如牛仔裤(本来是第二条),会更新这条记录的时间,下次再看,牛仔裤的排列就在第一位了.并且有清除历史记录的功能. 整理需求,大致需

  • Android使用RecyclerView实现自定义列表、点击事件以及下拉刷新

    Android使用RecyclerView 1. 什么是RecyclerView RecyclerView 是 Android-support-v7-21 版本中新增的一个 Widgets,官方对于它的介绍则是:RecyclerView 是 ListView 的升级版本,更加先进和灵活. 简单来说就是:RecyclerView是一种新的视图组,目标是为任何基于适配器的视图提供相似的渲染方式.它被作为ListView和GridView控件的继承者,在最新的support-V7版本中提供支持. 2.

随机推荐