帮我用vue和elementui checkbox多选请求接口
时间: 2023-12-10 15:41:55 浏览: 108
好的,首先你需要在 Vue 项目中安装 ElementUI,可以通过以下命令进行安装:
```
npm install element-ui --save
```
然后在 main.js 中引入 ElementUI:
```js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
接下来,在你的组件中使用 ElementUI 的 Checkbox 组件,如下所示:
```html
<template>
<div>
<el-checkbox-group v-model="selectedFruits">
<el-checkbox label="apple">Apple</el-checkbox>
<el-checkbox label="banana">Banana</el-checkbox>
<el-checkbox label="orange">Orange</el-checkbox>
</el-checkbox-group>
<el-button type="primary" @click="submit">Submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
selectedFruits: []
}
},
methods: {
submit() {
// 构造请求参数
const params = {
fruits: this.selectedFruits
}
// 发送请求
// axios.post('/api/your-api', params)...
}
}
}
</script>
```
这样,当用户在 Checkbox 中选择水果后,点击 Submit 按钮,就会发送一个带有选中水果参数的请求,你只需要将 `/api/your-api` 替换为你的接口地址即可。
阅读全文