Vue+ElementUI渲染select下拉框

User.java

/*实现getter和setter方法注解*/
@Data
public class User {
    private Integer id;
    private String name;
}

UserMapper.java

@Mapper
public interface CommonUserMapper {
    /**查询所有*/
    List<CommonUser> selectAllCommonUser();
}

UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.mapper.CommonUserMapper">

    <select id="selectAllCommonUser" resultType="com.demo.domain.CommonUser">
        SELECT * FROM common_user
    </select>

</mapper>

UserService.java

public interface CommonUserService {
    /**查询所有*/
    List<CommonUser> selectAllCommonUser();
}

UserServiceImpl.java

@Service
public class CommonUserServiceImpl implements CommonUserService {
    @Autowired
    CommonUserMapper commonUserMapper;

    /**查询所有*/
    @Override
    public List<CommonUser> selectAllCommonUser() {
        return commonUserMapper.selectAllCommonUser();
    }
}

UserController.java

@RestController
public class CommonUserController {

    @Autowired
    CommonUserService commonUserService;

    @GetMapping("/selectAllCommonUser")
    public Result selectAllCommonUser(){
        List<CommonUser> commonUsers = commonUserService.selectAllCommonUser();
        return Result.success(commonUsers);
    }
}
<template>
  <div>
      <el-dialog title="更新" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="form">
          <el-form-item label="姓名" label-width="15%">
            <el-select v-model="form.name" placeholder="请选择姓名" style="width:90%">
              <el-option v-for="item in names" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      dialogFormVisible:false,
      form:{},
      names:[],
    }
  },
  // 页面加载时调用
  created(){
    this.getName()
  },
  methods:{
    getName(){
      request.get('/selectAllCommonUser').then(res=>{
        if(res.code === '200'){
          this.names = res.data
        }else{
          this.$message.error('查询失败')
        }
      })
    }
  }
}
</script>

JSON数据

{
    "code": "200",
    "message": "请求成功",
    "data": [
        {
            "id": 1,
            "name": "张三"
        },
        {
            "id": 2,
            "name": "李四"
        },
        {
            "id": 3,
            "name": "王五"
        },
        {
            "id": 4,
            "name": "赵六"
        }
    ]
}

效果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

压力容器多开孔结构静力分析APP

压力容器多开孔结构静力分析APP对带有多个接管的容器结构在内压作用下进行静力分析&#xff0c;考察相邻接管开孔对容器及接管强度的影响。通过对容器和接管的几何尺寸、材料属性、载荷等进行参数化&#xff0c;以方便设计工程师对不同参数下的此类结构进行仿真分析。 近年来&a…

常用设计模式(工厂方法,抽象工厂,责任链,装饰器模式)

前言 有关设计模式的其他常用模式请参考 单例模式的实现 常见的设计模式(模板与方法&#xff0c;观察者模式&#xff0c;策略模式) 工程方法 定义 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。Factory Method使得一个类的实例化延迟到子类。 ——《设…

【idea】idea中编译内存不足(java: java.lang.0ut0fMemoryError: Java heap space)的解决方法

问题 在编译一个较大的idea项目时候&#xff0c;有时候会显示内存不足&#xff0c;导致项目编译失败 原因 编译项目时实际也是启动了jvm进行的&#xff0c;所以需要分配对应的内存大小。 这个大小在idea中有一个默认的配置&#xff0c;大小是700M。 对于一个大型的项目这个大…

数学建模--PageRank算法的Python实现

文章目录 1. P a g e R a n k PageRank PageRank算法背景2. P a g e R a n k PageRank PageRank算法基础2.1. P a g e R a n k PageRank PageRank问题描述2.2.有向图模型2.3.随机游走模型 3. P a g e R a n k PageRank PageRank算法定义3.1. P a g e R a n k PageRank PageRank…

qml 简单变换

有3个圣诞树&#xff1a; 点击第1个圣诞树&#xff0c;每点击一次&#xff0c;向右平移10px&#xff1b; 点击第2个圣诞树&#xff0c;每点击一次&#xff0c;旋转角度增加20度&#xff1b; 点击第3个圣诞树&#xff0c;每点击一次&#xff0c;旋转角度增加20度&#xff0c;…

电脑如何pdf转图片?pdf转图片工具介绍

无论是为了共享、展示、编辑、安全保护、印刷出版、学术研究还是教育目的&#xff0c;使用电脑pdf转图片都是一种非常实用的工具和技术&#xff0c;它提供了更多的灵活性、可视化效果和安全性&#xff0c;适用于各种日常使用场景&#xff0c;那么有没有好用的pdf转图片工具推荐…

《GitHub Copilot 操作指南》课程介绍

第1节&#xff1a;GitHub Copilot 概述 一、什么是 GitHub Copilot 什么是 GitHub Copilot GitHub Copilot是GitHub与OpenAI合作开发的编程助手工具&#xff0c;利用机器学习模型生成代码建议。它集成在开发者的集成开发环境&#xff08;IDE&#xff09;中&#xff0c;可以根…

国产品牌GC6609与TM2209的参数分析,为什么适用于3D打印机,医疗器械等产品中

步进电机驱动的应用方案目前市场上大多选用国外品牌的电机驱动器&#xff0c;其中trinamic的TMC2208/2209在这一块的应用很广泛。但是由于市场越来越应激。&#xff0c;当前对于产品开发成本要求也越来越低&#xff0c;国产品地准出了相应的TMC2208/2209&#xff0c;因此trinam…

linux zabbix监控

zabbix总结 zabbix-server 10051 zabbix-agent 10050 zabbix-proxy 10051 1.监控项&#xff08;模板&#xff09;&#xff1a;获取监控数据 #模板直接链接到新的主机 2.触发器&#xff1a;设置一个值 在非合理区间报警 3.动作&#xff1a;可以帮忙发送通知&#xff08;告…

SpringBoot之文件上传

1、文件上传原理&#x1f618; 表单的enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。 当表单的enctype"application/x-www-form-urlencoded"&#xff08;默认&#xff09;时&#xff0c;form表单中的数据格式为&#xff1a;keyvalue&keyvalue …

中国电子学会2023年09月份青少年软件编程Scratch图形化等级考试试卷一级真题(含答案)

一、选择题&#xff08;共25题&#xff0c;每题2分&#xff09; 1.下列哪项内容是不可以修改的&#xff1f;&#xff08;2分&#xff09; A.角色名称 B.造型名称 C.舞台名称 D.背景名称 答案解析&#xff1a;舞台的名称无法修改&#xff0c;可以修改舞台中某一个背景的名…

ChatGPT:关于 OpenAI 的 GPT-4工具,你需要知道的一切

ChatGPT&#xff1a;关于 OpenAI 的 GPT-4工具&#xff0c;你需要知道的一切 什么是GPT-3、GPT-4 和 ChatGPT&#xff1f;ChatGPT 可以做什么&#xff1f;ChatGPT-4 可以做什么&#xff1f;ChatGPT 的费用是多少&#xff1f;GPT-4 与 GPT-3.5 有何不同&#xff1f;ChatGPT 如何…

【C语言进阶】编译和链接

引言 介绍编译和链接相关知识&#xff0c;计算机如何识别我们的代码&#xff0c;如何将我们的代码转化为计算机可执行程序。 ✨ 猪巴戒&#xff1a;个人主页✨ 所属专栏&#xff1a;《C语言进阶》 &#x1f388;跟着猪巴戒&#xff0c;一起学习C语言&#x1f388; 目录 翻译…

《WebKit 技术内幕》之七(2): 渲染基础

2 网页层次和RenderLayer树 2.1 层次和RenderLayer对象 前面章节介绍了网页的层次结构&#xff0c;也就是说网页是可以分层的&#xff0c;这有两点原因&#xff0c;一是为了方便网页开发者开发网页并设置网页的层次&#xff0c;二是为了WebKit处理上的便利&#xff0c;也就是…

使用 Vector 在 Kubernetes 中收集日志

多年来&#xff0c;我们一直在使用 Vector 在我们的 Kubernetes 平台中收集日志&#xff0c;并成功地将其应用于生产中以满足各种客户的需求&#xff0c;并且非常享受这种体验。因此&#xff0c;我想与更大的社区分享它&#xff0c;以便更多的 K8s 运营商可以看到潜力并考虑他们…

[足式机器人]Part2 Dr. CAN学习笔记- 最优控制Optimal Control Ch07-1最优控制问题与性能指标

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - 最优控制Optimal Control Ch07-1最优控制问题与性能指标

亚马逊KYC审核的重要性,所需提交的文件有哪些?—站斧浏览器

亚马逊KYC审核的重要性有哪些&#xff1f; KYC审核是亚马逊对卖家身份的一种验证&#xff0c;确保卖家遵守相关法规。只有通过审核的卖家才能在欧洲平台进行销售。因此&#xff0c;正确理解和应对KYC审核对于卖家来说至关重要。 注册完成后立即触发&#xff1a;新注册的卖家可…

【小沐学GIS】基于C#绘制三维数字地球Earth(OpenGL)

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第二期3【小沐学GIS】…

TSKE 系列液氮低温恒温器

锦正茂科技有限公司研发的液氮型低温恒温器&#xff0c;利用液氮作为降温媒介&#xff0c;标准恒温器可实现快速降温至液氮温度&#xff08;约20min&#xff09;&#xff0c;其工作原理是在恒温器内部液氮腔内装入液氮&#xff0c;通过调整控温塞与冷指的间隙来保持冷指的漏热稳…

使用docker安装使用AWVS渗透常用工具

AWVS安装 AWVS我是装在Docker上的&#xff0c;在VPS中部署好Docker后&#xff0c;敲入以下命令 docker pull secfa/docker-awvs #拉取镜像 docker run -it -d -p 8443:3443 secfa/docker-awvs #将Docker的3443端口映射到VPS的8443端口访问https://VPS的IP:8443 默认账号密码&…