vue+element+springboot实现从数据库取出的值进行多选
时间: 2023-09-17 22:07:57 浏览: 94
首先,在后端Spring Boot中创建一个REST API,用于从数据库中获取选项列表。可以使用JPA或MyBatis等框架来查询数据库并返回结果。
在前端Vue中,使用Element UI的el-select和el-option组件来实现多选下拉框。在mounted生命周期钩子中,使用axios或者Vue-resource等库来调用后端的REST API,获取选项列表并渲染到el-option中。
最后,使用v-model指令和multiple属性将el-select设置为多选模式,并将选中的选项绑定到Vue实例的数据中,以便后续处理。以下是一个简单的示例代码:
后端Spring Boot代码示例:
```java
@RestController
@RequestMapping("/api/options")
public class OptionController {
@Autowired
private OptionRepository optionRepository;
@GetMapping
public List<Option> getOptions() {
return optionRepository.findAll();
}
}
```
前端Vue代码示例:
```html
<template>
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.id" :label="option.label" :value="option.id"></el-option>
</el-select>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
options: [],
selectedOptions: []
}
},
mounted() {
axios.get('/api/options').then(response => {
this.options = response.data;
});
}
}
</script>
```
阅读全文