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

效果

相关推荐
灵感__idea8 分钟前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
excel1 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
苏打水com4 小时前
JavaScript 入门学习指南:从零基础到能写交互效果
javascript
大前端helloworld4 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试
嫂子的姐夫4 小时前
11-py调用js
javascript·爬虫·python·网络爬虫·爬山算法
Dajiaonew4 小时前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
kakacc:5 小时前
SpringBoot+Hutool+Vue实现导出
java·vue.js·spring boot
勤奋菲菲7 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js
10年前端老司机7 小时前
面试官爱问的 Object.defineProperty,90%的人倒在这些细节上!
前端·javascript
徐小夕8 小时前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端