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": "赵六"
        }
    ]
}

效果

相关推荐
渣哥39 分钟前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试
云枫晖1 小时前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js
不一样的少年_1 小时前
你家孩子又偷玩网页游戏? 试试这个防沉迷工具
前端·javascript·浏览器
掘金安东尼1 小时前
前端周刊第436期(2025年10月13日–10月19日)
前端·javascript·github
昔人'1 小时前
html`<mark>`
前端·javascript·html
前端拿破轮2 小时前
从0到1搭一个monorepo项目(二)
前端·javascript·面试
SuperherRo2 小时前
JS逆向-安全辅助项目&Yakit热加载&魔术方法&模版插件语法&JSRpc进阶调用&接口联动
javascript·安全·yakit·jsrpc·热加载
用户47949283569152 小时前
用|运算符写管道?Symbol.toPrimitive让JavaScript提前用上|>语法
前端·javascript
知识分享小能手3 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
勇敢di牛牛3 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js