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

PCthedream

于 2023-12-21 16:42:06 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/PCthedream/article/details/135133627

本文介绍了如何在前端使用Vue的el-select组件实现数据双向绑定，通过axios发送GET请求获取后端接口的列表数据，同时处理distinct去重问题。在后端，通过实体类和Service层实现数据获取并返回给前端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端：

<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:去重，不显示相同的数据