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属性相关推荐

解决element-ui中select下拉框popper超出弹框问题
问题场景如下: 尝试了好几种解决方法,比如从下拉框el-popper使用fixed定位入手,修改popper-append-to-body,或者修改z-index,看了源码后又尝试监听表格滚动使用`t ...
select下拉框默认选中selected属性不起作用的解决方法 ligerui
select下拉框默认选中selected属性不起作用浏览器-360浏览器系统-win10 框架-ligerui 原先代码: <td align="left" class ...
antd vue 多个下拉联动_antd中select下拉框值为对象选中的问题
使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在o ...
Vue中select下拉框的默认选中项的三种情况
在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值而不是空白,比如显示 &qu ...
elementui中，下拉框设置，既可以从下拉框中选择，又可以自己添加选项
1.需求在用elementui结合vue时,有个需求就是有个下拉框,我需要可以从下拉框中选,也可以自己输入的值变成下拉框的选项,那么,代码如下: 2.实现在template中,我这是在表格中,表格 ...
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
js中select下拉框重置_Web测试中需要注意的16个小细节
随着Internet和Intranet/Extranet的快速增长,Web已经对商业.工业.银行.财政.教育.政府和娱乐及我们的工作和生活产生了深远的影响.许多传统的信息和数据库系统正在被移植到互联网 ...
下拉框选中状态html,js中select下拉框选中
怎么用js动态设置select中的某个值为选中值 select 中的某个options为新建,但在子页面新建一个选项时怎么能提交新用JS动态设置select的方法如下: 手动通过原生JS来实现: / ...

vue 的elementui中select下拉框多选项-multiple属性

vue的select下拉框多选项-multiple属性

资料相关

vue-element-admin

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

vue 的elementui中select下拉框多选项-multiple属性相关推荐

最新文章

热门文章