elementui下选框获取后端数据并查询

前端:

复制代码
<el-select v-model="keyword">
    <el-option 
      v-for="item in options"
      :key="item.name"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>

v-model:双向绑定事件keyword

label:页面展示数据

key:传给后端的数据

复制代码
getName(){
      this.$http.get("/evaluate/getyi").then(res=>{
        this.options = res.data.resultObj;
      }).catch(res => {
        this.$message.error("获取房间数据失败!!!");
      })
    },

发生请求:请求接口和后端接口一致

复制代码
mounted() {
    this.getName()
//调用方法
  }

后端:

实体类:

复制代码
  private String name;

Mapp:

复制代码
 List<Evaluate> getyi();
复制代码
ServiceImpl:
复制代码
  @Override
    public AjaxResult getyi(){
        List<Evaluate> yi = evaluateMapper.getyi();
        Evaluate evaluate = new Evaluate();
        evaluate.setName("");//加入一个空数据
        yi.add(evaluate);//添加数据
        return AjaxResult.me().setResultObj(yi);
    }

service:

复制代码
AjaxResult getyi();

XML:

复制代码
<select id="getyi" resultType="cn.ljy.evaluate.domain.Evaluate">
        select distinct name from d_evaluate
    </select>

distinct:去重,不显示相同的数据
相关推荐
拉不动的猪34 分钟前
JQ常规面试题
前端·javascript·面试
海上彼尚35 分钟前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index1 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
新中地GIS开发老师1 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学
Shimeng_19891 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
一只一只妖2 小时前
前端导出带有合并单元格的列表
前端
Mr...Gan2 小时前
TypeScript
开发语言·javascript·typescript
lilye662 小时前
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
前端·数据挖掘·数据分析
前端 贾公子2 小时前
《Vuejs设计与实现》第 8 章(挂载与更新)
开发语言·前端·javascript
开始编程吧3 小时前
【HarmonyOS5】鸿蒙×React Native:跨端电商应用的「双引擎」驱动实践
前端