select多选下拉框 移动端_vue的select下拉框多选项-multiple属性

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

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

资料相关

vue-element-admin

今天记录一个select下拉框单选或者多选项，支持删除的功能

其实很简单的，需要添加一个属性

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

饿了么这个框架的文档给的十分的全面，

组件是非常的丰富的

v-for="item in options"

:key="item.value"

:label="item.label"

:value="item.value">

v-model="value2"

multiple

collapse-tags

style="margin-left: 20px;"

placeholder="请选择">

v-for="item in options"

:key="item.value"

:label="item.label"

:value="item.value">

export default {

data() {

return {

options: [{

value: '选项1',

label: '黄金糕'

}, {

value: '选项2',

label: '双皮奶'

}, {

value: '选项3',

label: '蚵仔煎'

}, {

value: '选项4',

label: '龙须面'

}, {

value: '选项5',

label: '北京烤鸭'

}],

value1: [],

value2: []

}

}

}

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

ref="dataForm"

label-position="left"

label-width="90px"

style="width: 400px; margin-left:50px;"

>

v-model="nextProjectForm.userGrades"

class="filter-item"

placeholder="选择年级"

multiple

style="width: 311px; "

>

v-for="item in tabMapOptions"

:key="item.key"

:label="item.label"

:value="item.key"

/>

确定

//调用接口

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: "保存失败",

});

},

},

};

.tab-container {

margin: 30px;

}

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下拉框选择其中多个数据的时候,传到后端的参数