在Vue+Element中,Select选项值动态从后台接口获取的实现方法

HTML部分

<el-form ref="form" :model="form" label-width="82px">
    <el-form-item label="选择媒体:">
       <el-select v-model="value" placeholder="请选择媒体">
          <el-option
            v-for="item in options"
            :key="item.code"
            :label="item.name"
            :value="item.code">
       </el-option>
    </el-select>
</el-form-item>

 数据部分

data() {
    return {
        form:{
            code:'',
            name:''
        },
        value:'',
        options: []
    }
}

接口部分

async allmedia() {
    let res = await fetch('/v3/media/allList');
    res.result.forEach(element => {
        this.options.push({name:element.name,code:element.code});
     })
 }

get请求封装

// 封装api get请求
export const fetch = (path, params) => {
  return axios.get(path, {params: params}).then(res => {
      if(res.data.code===403){
        router.push({
            path:'/'
        });
        Message({
            message:res.data.msg,
            type:'warning'
        })
      }else{
          return res.data;
      }
  }).catch(err => {
    console.log(err);
    return Promise.reject(err);
  })
}

实现效果

 

  • 25
    点赞
  • 80
    收藏
    觉得还不错? 一键收藏
  • 29
    评论
首先,你需要在后端(SpringBoot)写一个接口来从数据库取出相应的。假设你的存储在一个名为"options"的表,你可以定义一个RestController来实现这个接口: ```java @RestController @RequestMapping("/options") public class OptionController { @Autowired private OptionRepository optionRepository; @GetMapping("/all") public List<Option> getAllOptions(){ return optionRepository.findAll(); } } ``` 这里使用了Spring Data JPA来查询数据库。你需要创建一个名为"Option"的类来映射数据库的表: ```java @Entity @Table(name = "options") public class Option { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; // getters and setters } ``` 现在你可以在前端(Vue+Element)调用这个接口,并将结果渲染到页面上。你可以使用ElementUI的多选框组件来实现多选功能。假设你已经安装了ElementUI,并且你的Vue组件有一个名为"selectedOptions"的数组来存储选选项,你可以这样写: ```vue <template> <div> <el-checkbox-group v-model="selectedOptions"> <el-checkbox v-for="option in options" :label="option.id" :key="option.id">{{ option.name }}</el-checkbox> </el-checkbox-group> </div> </template> <script> import axios from 'axios' export default { name: 'MyComponent', data(){ return { options: [], selectedOptions: [] } }, mounted(){ axios.get('/options/all') .then(res => { this.options = res.data }) } } </script> ``` 这里使用了axios来调用后端接口获取所有的选项。然后将选项渲染到多选框组件,当用户勾选选项时,Vue会自动将选选项的id存储到"selectedOptions"数组。你可以在表单提交时将"selectedOptions"数组传回后端,处理选选项
评论 29
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值