vue的select下拉框多選項(xiàng)-multiple屬性

最近在使用vue-element-admin這個(gè)后臺(tái)管理框架開源模板在做一個(gè)管理后臺(tái)，使用起來其實(shí)還挺方便的，大部分的組件源碼里面都已經(jīng)寫好了，用的時(shí)候只需要把源碼拿出來修改修改，也就成了。

這里記錄一下開發(fā)過程中遇到的一些功能。

---

資料相關(guān)

vue-element-admin

推薦指數(shù)：star:55k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo體驗(yàn)：https://panjiachen.github.io/vue-element-admin/#/dashboard

---

今天記錄一個(gè)select下拉框單選或者多選項(xiàng)，支持刪除的功能 其實(shí)很簡單的，需要添加一個(gè)屬性

為el-select設(shè)置multiple屬性即可啟用多選

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

餓了么這個(gè)框架的文檔給的十分的全面， 組件是非常的豐富的

<template><el-select v-model="value1" multiple placeholder="請(qǐng)選擇"><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="請(qǐng)選擇"><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: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶'}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],value1: [],value2: []}}} </script>

實(shí)際應(yīng)用的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="所屬年級(jí)"><el-selectv-model="nextProjectForm.userGrades"class="filter-item"placeholder="選擇年級(jí)"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> //調(diào)用接口 import { saveSubject } from "@/api/content"; export default {data() {return {gradeSelect: "",tabMapOptions: [{ label: "幼兒園", key: "kinderGarten" },{ label: "一年級(jí)", key: "firstGrade" },{ label: "二年級(jí)", key: "twoGrade" },{ label: "三年級(jí)", key: "threeGrade" },{ label: "四年級(jí)", key: "fourGrade" },{ label: "五年級(jí)", key: "fiveGrade" },{ label: "六年級(jí)", 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 }

當(dāng)select下拉框選擇其中一個(gè)數(shù)據(jù)的時(shí)候，傳到后端的參數(shù)

當(dāng)select下拉框選擇其中多個(gè)數(shù)據(jù)的時(shí)候,傳到后端的參數(shù)

參考鏈接：

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

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

總結(jié)

以上是生活随笔為你收集整理的vue 的elementui中select下拉框多选项-multiple属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。