vue的select下拉框多選項-multiple屬性

最近在使用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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。