Vue+ElementUI渲染select下拉框

User.java

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

UserMapper.java

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

UserMapper.xml

java 复制代码
<?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

java 复制代码
public interface CommonUserService {
    /**查询所有*/
    List<CommonUser> selectAllCommonUser();
}

UserServiceImpl.java

java 复制代码
@Service
public class CommonUserServiceImpl implements CommonUserService {
    @Autowired
    CommonUserMapper commonUserMapper;

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

UserController.java

java 复制代码
@RestController
public class CommonUserController {

    @Autowired
    CommonUserService commonUserService;

    @GetMapping("/selectAllCommonUser")
    public Result selectAllCommonUser(){
        List<CommonUser> commonUsers = commonUserService.selectAllCommonUser();
        return Result.success(commonUsers);
    }
}
javascript 复制代码
<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数据

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

效果

相关推荐
LL.。4 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴8 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
Mintopia29 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
Mintopia34 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
paopaokaka_luck34 分钟前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
来碗疙瘩汤38 分钟前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
打野赵怀真40 分钟前
在TypeScript中装饰器有哪些应用场景?
前端·javascript
destinying41 分钟前
vite学习笔记
前端·javascript
LRH42 分钟前
JS基础 - 手写数组扁平化函数
前端·javascript
FogLetter1 小时前
从零到一实现流式输出:SSE技术在前端应用中的魔法时刻
前端·javascript