vue实现查询搜索框下拉字典

字典表

在这里插入图片描述

前端页面显示

在这里插入图片描述

依据这个字典表实现动态查询

初始化数组

首先先在全局变量里定义一个数据存放查询出来的数据

data() {return {dicts: []};},

生命周期

查询的时候是声明周期开始的时候,原本增删改查页面在生命周期开始的时候就查询了页面的数据获得了列表值,此时在生命周期开始也要查询字典的数据值

activated() {this.getDataList();// 获取所有的"性别this.getDicts("sex");},

查询符合条件的字典数据项getDicts()

getDicts()方法在methods内写,类似于查询方法,先向后端发送一个请求,查询字典数据项,查到之后如果符合数据不为空不为null不是undefined类型且code恒等于0,就进行数据的查询放入上面定义的空数组,否则数组还是为空

getDicts(code) {this.$http({url: this.$http.adornUrl("/sys/dict/select"),method: "get",params: this.$http.adornParams({code: code,}),}).then(({ data }) => {if (data && data.code === 0) {this.dicts = data.list;})} else {this.dicts = [];}// this.dicts = data && data.code === 0 ? data.list : [];});},

这里code不定义值,可以在生命周期内写形参,让code和形参相等的时候查询到对应的数据库数据

下拉框

在表单选项内写下拉框组件el-select,和性别双向绑定,加上清除,可以点叉叉一键清除下拉框内数据,el-option内写法就是先遍历dicts数组,因为上面已经查询到数据了,v-for遍历查询item

  • key:相当于身份令牌,唯一的令牌,防止出错。这个key没有也行,但是保险起见最好加上。因为这个key作为 value 唯一标识的键名,绑定值为对象类型时必填。
  • label :这是给用户看的,当点击下拉菜单时,会出来选项,用户看到的选项就是这个
  • value :这是你点击某个label(option)之后,将对应的值给v-model绑定的值model

这里都写item.name是因为数据库内字典表的name是需要填入的值也是需要显示的值

<el-form-item><el-select v-model="dataForm.sex" placeholder="请选择筛选条件" clearable><el-option v-for="item in dicts" :key="item.name" :label="item.name" :value="item.name" ></el-option></el-select></el-form-item>

至此,前端已书写完毕,要接着写后端的查询方法

查询方法写在字典service层中

先写一个查询接口方法

写一个通用的接口,先在service层里写一个自定义根据传入的code查找方法,查找到的数据放入集合

List<SysDictEntity> select(String code);

在实现层实现接口方法

再在实现类中重写这个方法,创建一个高级查询对象,根据这个对象的查询条件,需要数据库字典表type字段值为2,code字段值是code的数据,最后在接口中调用service的方法并且传入code值放入list集合,返回响应前端
此时code值没有传入,不知道code值是什么,需要在前端启动的时候就传入
在方法内写一个根据code值发送请求查找数据
需要在前端启动的时候就传入,所以要在生命周期内调用,此时就可以传入相对应的形参

下面写一个伪代码,可根据伪代码进行相应书写

public 类型 方法名(){
创建一个wrapper对象
给这个对象加上查询条件,在条件里写对字段的限制
返回basemapper里的查询方法(17)用这个查询方法查询wrapper对象
}

对应写出来的代码如下

    @Overridepublic List<SysDictEntity> select(String code) {QueryWrapper<SysDictEntity> sdeqw = new QueryWrapper<>();sdeqw.eq("type","2")//性别 男女保密//code和数据库内的值相等的.eq("code",code);return this.baseMapper.selectList(sdeqw);}

最后在controller层内写查询方法

    @GetMapping("/select")public R select(String code){List<SysDictEntity> list = sysDictService.select(code);return R.ok().put("list",list);}

至此,前后端的字典查询都写好啦

拓展:通常数据库内性别都是数字来表示的,如何根据数字在页面上显示字典项的汉字呢?

user表的sex字段值和dict表的value字段值相等且dict表的code字段值和user表的sex字段名相等的时候在前端页面展示sex字段值的地方要展示dict表value字段值对应的name字段值
在这里插入图片描述

此时有两种处理方法,一是在后端处理,查询的时候就进行集合一对一,二是在前端处理,数据传过来之后放进一个集合,最后一对一

后端处理:查询的时候就要显示 所以在分页查询内写

1.查询出code值为sex的数据放入list
2.dict中的name和value是一一对应关系,所以用map集合存放较好
3.遍历上面有数据的list集合,键为dict的value值,值是name,因为键找值快
4.由于是分页查询,在写这个性别处理的时候上面已经写好分页查询了,所以可以直接用page,获取记录,page.getRecords=分页查询结果集,遍历结果集对每一个元素先获取当前元素对象的sex字段值,再从map集合里找这个对应的值,最后将找到的值映射到当前对象的sex字段上

    @Override/*返回PageUtils工具类对象*/public PageUtils queryPage(Map<String, Object> params) {String username = (String) params.get("username");String sex = (String) params.get("sex");String start=(String) params.get("start");String end=(String) params.get("end");QueryWrapper<User> qw = new QueryWrapper<>();/*like-模糊查询*/qw.like(StringUtils.isNotBlank(username),"username",username).eq(StringUtils.isNotBlank(sex),"sex",sex);if (StringUtils.isNotBlank(start) && StringUtils.isNotBlank(end)) {qw.between("birthday",start,end);}/*分页查询*/IPage<User> page=this.page(new Query<User>().getPage(params),qw);//1.查询出code值为sex的数据放入listList<SysDictEntity> list = sysDictService.select("sex");//2.dict中的name和value是一一对应关系,所以用map集合存放较好HashMap<String, String> sexMap = new HashMap<>();//3.遍历上面有数据的list集合,键为dict的value值,值是name,因为键找值快list.forEach(dict->{sexMap.put(dict.getValue(),dict.getName());});//4.由于是分页查询,在写这个性别处理的时候上面已经写好分页查询了,所以可以直接用page,获取记录,page.getRecords=分页查询结果集,遍历结果集对每一个元素page.getRecords().forEach(val->{// 先获取当前元素对象的sex字段值,再从map集合里找这个对应的值,最后将找到的值映射到当前对象的sex字段上val.setSex(sexMap.get(val.getSex()));});return new PageUtils(page);}

前端处理

1.同样要一个集合来存放一一对应关系数据,在全局变量内声明一个集合{}

  data() {return {sexMap:{}};},

2.获取字典数据之后dicts内有所有需要的性别数据了,遍历这个dicts数组,存放键值value和name

this.dicts.forEach(dict=>{this.$set(this.sexMap,dict.value,dict.name)})

3.在表单项数据内要获取一行的性别数据替换为集合内的name(value=sex),需要使用到插槽,在el-table-column中占一个位置,等待操作往里面填值,这里填的值就是集合中获取的name替换这一行插槽的性别数据
先在 el-table-column 中占一个位置,等待操作往里面填值

      <el-table-columnprop="sex"header-align="center"align="center"label="性别"><template slot-scope="scope">{{ sexMap[scope.row.sex] }}</template></el-table-column>

4.由于数据库内sex由字符串改为了数字,所以需要在上面下拉框的value属性进行更改,此时value应该输入item.value

      <el-form-item><el-select v-model="dataForm.sex" placeholder="请选择筛选条件" clearable><el-option v-for="item in dicts" :key="item.name" :label="item.name" :value="item.value" ></el-option></el-select></el-form-item>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/671430.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElasticSearch-SpringBoot整合ElasticSearch

六、SpringBoot整合ElasticSearch 1、浏览官方文档 1、查找跟ES客户端相关的文档 使用Java REST Client 选择Java Hight Level REST Client 2、创建项目的准备 1.找到原生的依赖 2.找到对象 3.分析这个类里面的方法 3、正式创建项目 1.创建工程 2.导入依赖 注意依赖版本…

Python 函数式编程进阶:map、filter、reduce

Python 函数式编程进阶&#xff1a;map、filter、reduce 介绍map 函数作用和语法使用 map 函数Lambda 函数的配合应用 filter 函数作用和语法使用 filter 函数Lambda 函数的结合运用 reduce 函数作用和语法使用 reduce 函数典型应用场景 介绍 在函数式编程中&#xff0c;map、…

【QT】opcuaServer 的构建

【QT】opcuaServer 的构建 前言opcuaServer实现测试 前言 在博文【opcua】从编译文件到客户端的收发、断连、节点查询等实现 中&#xff0c;我们已经介绍了如何在QT 中创建opucaClient 。在本期的博文中&#xff0c;我们基于之前的部署环境&#xff0c;介绍一下如何构建opcuaS…

springboot与Elasticsearch版本兼容对比

首先 大家在下载 Elasticsearch 时 最好先弄清楚版本 因为 如果 Spring Boot 版本 不兼容 Elasticsearch 那就是到头一场空了 Elasticsearch 版本 6.x 可以兼容 Spring Boot 2.x Elasticsearch 版本 7.x 可以兼容 Spring Boot 2.x 3.x 4x Elasticsearch 版本 7.x 以及 8.x 可以…

Flask 入门4:Flask 模板

1. 前言 Flask 拥有丰富的扩展方法&#xff0c;且都有统一的特点&#xff1a;简单和即学即用。当我们要实现某个功能之前&#xff0c;可以提前去搜一搜这个功能包是否已经存在&#xff0c;这样也能帮助我剩下很多时间。那么要去哪里找到这些扩展包呢&#xff0c;这里推荐两个方…

5G智能卷烟工厂数字孪生可视化平台,推进烟草行业数字化转型

5G智能卷烟工厂数字孪生可视化平台&#xff0c;推进烟草行业数字化转型。随着5G技术的不断发展&#xff0c;智能卷烟工厂数字孪生可视化平台成为了推进烟草行业数字化转型的重要手段。该平台将5G技术与数字孪生技术相结合&#xff0c;实现了对卷烟生产全过程的实时监控、数据分…

ROE是什么?如何用ROE来分析企业?

ROE是什么&#xff1f; ROE&#xff0c;即净资产收益率&#xff08;Return on Equity&#xff09;&#xff0c;又称作股东权益报酬率、权益利润率&#xff0c;是净利润与平均股东权益的百分比&#xff0c;也称为净值报酬率、权益报酬率、权益利润率、净资产利润率&#xff0c;…

网络选择流程分析(首选网络类型切换流程)

首先是界面,我在此平台的界面如下: 对应的入口源码位置在Settings的UniEnabledNetworkModePreferenceController中,当然其他平台可能在PreferredNetworkModePreferenceController中,流程上都是大同小异 然后点击切换按钮会调用到UniEnabledNetworkModePreferenceControlle…

用的到的linux-删除文件-Day3

前言&#xff1a; 上一节&#xff0c;我们讲到了怎么去移动文件&#xff0c;其中使用到两大类的脚本命令即cp和mv。各两种命令都可以完成移动&#xff0c;但是cp是复制粘贴的方式&#xff0c;可以选择原封不动的复制粘贴过来&#xff0c;即不修改文件及文件夹的创建时间等&…

2024Node.js零基础教程(小白友好型),nodejs新手到高手,(五)NodeJS入门——http模块

044_http模块_创建HTTP服务端 hello&#xff0c;大家好&#xff0c;那这个小节我们来使用 nodejs 创建一个 http 的服务&#xff0c;有了这个 http 服务之后&#xff0c;我们就可以处理浏览器所发送过来的请求&#xff0c;并且还可以给这个浏览器返回响应。 顺便说一下&#x…

【Linux】线程Pthread的概念 | NPTL线程库函数

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;Linux系列专栏&#xff1a;Linux基础 &#x1f525; 给大家…

华为、清华等开源超高清、精准文生图模型,0.5秒极速生成!

华为诺亚方舟实验室、清华大学信息科技学院、大连理工、香港大学和Hugging Face的研究人员&#xff0c;联合开源了超高清文生图模型——PIXART-δ。 研究人员将潜在一致性模型&#xff08;LCM&#xff09;和创新控制架构ControlNet-Transformer集成在PIXART-δ中&#xff0c;在…

【LeetCode: 73. 矩阵置零 + 矩阵】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

使用Python语言生成区块链地址

# 单次运行 import binascii import sha3 from ecdsa import SigningKey, SECP256k1priv SigningKey.generate(curveSECP256k1) # 生成私钥 pub priv.get_verifying_key() # 生成公钥keccak sha3.keccak_256() keccak.update(pub.to_string()) # keccak_256哈希运算 addr…

vue配置开发环境和生产环境

在与src文件夹同级的地方增加两个文件 .env.development .env.production配置development和production两个文件 在.env.development中写&#xff1a; NODE_ENV development VUE_APP_NUM dev //VUE_APP_自己取名字在.env.production中写&#xff1a; NODE_ENV production…

linux k8s 源码编译及单集群测试

目录 概述实践安装插件docker 在线安装containerd安装二进制安装yum安装修改containder配置文件 cnietcdrsyncgo设置golang代理 安装CFSSL下载kubernetes代码编译启动本地单节点集群问题k8s没有被正常启动该如何k8s正常启动日志测试 结束 概述 此文详细说明在 centos 7上编译 k…

QT上位机:串口调试助手

前言 上位机的简单编写可以帮我们测试并完善平台&#xff0c;QT作为一款跨平台的GUI开发框架&#xff0c;提供了非常丰富的常用串口api。本文先从最简单的串口调试助手开始&#xff0c;编写平台软件的串口控制界面 工程配置 QT 串口通信基于QT的QSerialPort类&#xff0c;先在…

【halcon】write_image 图片保存

前言 write_image 是一个可以用来保存图片的算子&#xff0c;可以将Image对象保存成各种格式的图片。还可以对图片进行压缩。 正文 参数&#xff1a; Image&#xff08;输入对象&#xff09;&#xff1a; 输入图像或输入图像的数组。支持的像素类型包括byte、direction、cy…

druid配置wall导致无法批量sql

1、现象 2、原配置 spring:autoconfigure:exclude: com.alibaba.druid.spring.boot.autoconfigure.DruidDataSourceAutoConfiguredatasource:druid:stat-view-servlet:enabled: trueloginUsername: ***loginPassword: ***allow:web-stat-filter:enabled: truefilter:wall:conf…

MATLAB知识点:矩阵元素的引用

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第3章 3.3.2 矩阵元素的引用 在讲解矩阵元素的引用之…