vue前端实现从数据库获取数据的下拉框以及带参请求

最新推荐文章于 2024-08-26 00:20:00 发布

Akashic_ether

最新推荐文章于 2024-08-26 00:20:00 发布

阅读量9.7k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/Akashic_ether/article/details/104631514

版权

本文介绍了如何在Vue项目中利用ElementUI的下拉框组件结合数据库数据，通过@change事件和getOptions方法动态获取轮播类型。同时讲解了带参请求的实现，使用request方法发送带type参数的请求，并在method中定义getType方法处理返回的数据，填充到datalist展示。

摘要由CSDN通过智能技术生成

一、下拉框的实现

 <el-form-item>
          <el-select @change="getOptions" v-model="type" placeholder="请选择轮播类型" style="">
            <el-option v-for="(item,index) in objData" :key="index" :value="item.type"
                       :label="item.type"/>
          </el-select>
 <el-form-item>

elementui中选择点击事件@change通过getOptions方法获取到数据库中轮播类型，然后通过el-option标签下拉选取

以下是getOptions方法部分的代码

 //获取下拉框中内容
    getOptions(){
      let _this = this
      this.$http.get("/company/imgtype/queryAll")
              .then(res =>
              {
                //请求返回的数据
                //赋值
                _this.objData = res.data
                console.log(this.objData)
              }).catch((error) =>{
        console.log(error);
      });
    },