最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。
这里记录一下开发过程中遇到的一些功能。
今天记录一个select下拉框单选或者多选项，支持删除的功能
其实很简单的，需要添加一个属性
为el-select设置multiple属性即可启用多选
饿了么这个框架的文档给的十分的全面，
组件是非常的丰富的
<template> <el-select v-model="value1" multiple placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-select v-model="value2" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择"> <el-option v-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-form ref="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-select v-model="nextProjectForm.userGrades" class="filter-item" placeholder="选择年级" multiple style="width: 311px; " > <el-option v-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下拉框选择其中多个数据的时候,传到后端的参数
