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

效果

相关推荐
鹏多多4 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
uhakadotcom8 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia13 分钟前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_9284115615 分钟前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Mintopia23 分钟前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
wusp199423 分钟前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
遂心_25 分钟前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_28 分钟前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
Aomnitrix31 分钟前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
森林的尽头是阳光1 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js