vue联动切换搜索域

this.listQuery[this.paramsName] = this.paramsValue;

<el-select v-model="paramsName" placeholder="搜索项" @change="toggle"> <el-option v-for="item in paramsOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="姓名" v-model="paramsValue" v-show="inputText"> </el-input> <el-select v-model="paramsValue" clearable placeholder="请选择" v-show="inputSelect"> <el-option v-for="item in paramsValueOptions" :key="item.value" :label="item.labelDefault" :value="item.value"></el-option> </el-select> <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button> <el-button class="filter-item" v-if="baseEmployeeManager_btn_add" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>

　　搜索栏

这里有三个变量：

paramsName 对应修改搜索选项的model，同时也是选项的key

paramsValue 对应选项的内容的model，对应选项的value

paramsOptions 存储这些key

paramsValueOptions 存储每一个key的取值集合，比如下拉框就是很多值

首先如果paramsName 对应下拉框：

先取下拉框的字典值，使用字典

import { getTypeValue } from '@/api/dict/dictValue/index';

初始化全局变量

      statusOptions: [],sexOptions: [],

调用字典，保存传回来的值到变量

    getTypeValue('type_is_flag').then(response => {this.statusOptions = response.data.rows;});getTypeValue('comm_sex').then(response => {this.sexOptions = response.data.rows;});getTypeValue('specialist_type').then(response => {this.specialistOptions = response.data.rows;});

切换的标志位

      paramsValue: undefined,paramsName: undefined,paramsValueOptions: [],inputText: true,inputSelect: false,specialistOptions: []

点击切换，触发toggle方法，toggle方法

    toggle() {this.paramsValue = undefined;switch (this.paramsName) {case 'empName':this.inputText = true;this.inputSelect = false;break;case 'sex':this.paramsValueOptions = this.sexOptions;this.inputText = false;this.inputSelect = true;break;case 'status':this.paramsValueOptions = this.statusOptions;this.inputText = false;this.inputSelect = true;break;case 'specialistType':this.paramsValueOptions = this.specialistOptions;this.inputText = false;this.inputSelect = true;break;}},

现在触发能修改值，修改的值也传进来了，要搜索，还要把搜索的参数在搜索时使用

this.listQuery[this.paramsName] = this.paramsValue;

好了

转载于:https://www.cnblogs.com/tabCtrlShift/p/9069163.html

vue联动切换搜索域相关推荐

vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
webpack+vue解决前端跨域问题
webpack+vue解决前端跨域问题参考文章: (1)webpack+vue解决前端跨域问题 (2)https://www.cnblogs.com/wei-dong/p/10689072.html ...
vue : 本地调试跨域问题的解决办法：proxyTable
vue : 本地调试跨域问题的解决办法:proxyTable 参考文章: (1)vue : 本地调试跨域问题的解决办法:proxyTable (2)https://www.cnblogs.com/fo ...
chrome使用tab键切换搜索
目前只有chrome才有使用tab键切换搜索的方式,非常实用. 1.设置 --> 管理搜索引擎 2.第一个参数是搜索引擎的名字: 第二个,在地址栏输入关键字,触发"按tab搜索&quo ...
vue 导航切换页面
vue 导航切换页面这是我做出来的效果图,点击可以切换页面的 1.里面<router-view></router-view>是路由,/Attention/Attention ...
dedecms联动筛选_织梦联动类别联动筛选搜索查询功能插件
用织梦做医院网站首页的症状导诊时候,需要用到织梦联动类别联动枚举结合织梦搜索查询实现查询数据.效果图如下: 症状和病情描述是后台联动类别管理里添加的一级.二级选择织梦联动类别搜索功能实现步骤: 具体 ...
解决Vue前后端跨域问题的多种方式
1 前言本文主要介绍借助解决Vue前后端跨域问题的几种方式说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封 ...
SwiftUI 仿头条工具条和内容联动切换TabView （教程含源码）
实战需求 SwiftUI 仿头条工具条和内容联动切换TabView 本文价值与收获看完本文后,您将能够作出下面的界面看完本文您将掌握的技能掌握TabView 实现页面切换实现上下联动基础知识 ...

vue联动切换搜索域

vue联动切换搜索域相关推荐

最新文章

热门文章