vue 的elementui中select下拉框多选项-凯发ag旗舰厅登录网址下载

最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。

这里记录一下开发过程中遇到的一些功能。

---

资料相关

vue-element-admin

推荐指数：star:55k github 地址：https://github.com/panjiachen/vue-element-admin demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard

---

今天记录一个select下拉框单选或者多选项，支持删除的功能 其实很简单的，需要添加一个属性

为el-select设置multiple属性即可启用多选

首先，看文档： https://element.eleme.cn/#/zh-cn/component/select

饿了么这个框架的文档给的十分的全面， 组件是非常的丰富的

<template><el-select v-model="value1" multiple placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-selectv-model="value2"multiplecollapse-tagsstyle="margin-left: 20px;"placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select> </template><script>export default {data() {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value1: [],value2: []}}} </script>

实际应用的demo，参考代码index.vue

<template><div class="tab-container"><el-formref="dataform"label-position="left"label-width="90px"style="width: 400px; margin-left:50px;"><el-form-item label="题目"><el-input type="textarea" :rows="2" v-model="nextprojectform.questioncontent"></el-input></el-form-item><el-form-item label="正确答案" prop="correctanswer"><el-input v-model="nextprojectform.correctanswer" /></el-form-item><el-form-item label="其他答案1" prop="otheranswer1"><el-input v-model="nextprojectform.otheranswer1" /></el-form-item><el-form-item label="其他答案2" prop="otheranswer2"><el-input v-model="nextprojectform.otheranswer2" /></el-form-item><el-form-item label="其他答案3" prop="otheranswer3"><el-input v-model="nextprojectform.otheranswer3" /></el-form-item><el-form-item label="所属年级"><el-selectv-model="nextprojectform.usergrades"class="filter-item"placeholder="选择年级"multiplestyle="width: 311px; "><el-optionv-for="item in tabmapoptions":key="item.key":label="item.label":value="item.key"/></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="createdata()">确定</el-button></div></div> </template> <script> //调用接口 import { savesubject } from "@/api/content"; export default {data() {return {gradeselect: "",tabmapoptions: [{ label: "幼儿园", key: "kindergarten" },{ label: "一年级", key: "firstgrade" },{ label: "二年级", key: "twograde" },{ label: "三年级", key: "threegrade" },{ label: "四年级", key: "fourgrade" },{ label: "五年级", key: "fivegrade" },{ label: "六年级", key: "sixgrade" },],nextprojectform: {questioncontent: "",correctanswer: "",otheranswer1: "",otheranswer2: "",otheranswer3: "",usergrades: [],questioncategory: "",},};},methods: {//添加增加题目async createdata() {let form = null;form = this.nextprojectform;const params = form;const res = await savesubject(params);console.log(res);if (res.code === "0000") {this.$message({type: "info",message: "保存成功",});return;}this.$message({type: "error",message: "保存失败",});},}, }; </script><style scoped> .tab-container {margin: 30px; } </style>

api

import request from '@/utils/request'//保存题目分类接口 export async function savesubjectcategory(data) {const res = await request({url: '/question/savequestioncategory',method: 'post',data})return res }

当select下拉框选择其中一个数据的时候，传到后端的参数

当select下拉框选择其中多个数据的时候,传到后端的参数

参考链接：

https://element.eleme.cn/#/zh-cn/component/select

https://cloud.tencent.com/developer/article/1691525

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。