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
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',
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须⾯'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value1: [],
value2: []
}
}
}
实际应⽤的demo，参考代码index.vue
ref="dataForm"
label-position="left"
label-width="90px"
>
v-model="nextProjectForm.userGrades" class="filter-item"
placeholder="选择年级"
multiple
>
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: {
vue element admin/
/添加增加题⽬
async createData() {
let form = null;
form = ProjectForm;
const params = form;
const res = await saveSubject(params); console.log(res);
if (de === "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下拉框选择其中多个数据的时候，传到后端的参数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。