本文主要是介绍Vue 多选下拉框值每组名字的只能选一个，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
先普及一下，下拉框怎么实现多选
// 下拉框实现多选 select标签加一个 multiple 即可
<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>
比如，
下拉框值：
测试流程1环节1，测试流程1环节2，
测试流程2环节1，测试流程2环节1
多选的时候，每个流程选项选择的时候只能选择一个值，比如选择流程1环节1，再选择流程1环节2，那多选框选中值只保留展示流程1环节2，不保留流程1环节1，选择流程2环节1，则多选框选中值就为“流程1环节2”，“流程2环节1”
// 界面组件先加上change事件
<el-select v-model="value1" multiple placeholder="请选择"
@change="changeValue"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
//js事件changeValue(val){// 获得所有下拉框中的值let allSelect = this.options;// 已经选中的值let a = this.value1;//选中两个值才开始比较if (a.length > 1) {let nameStr;for (let i = 0; i < allSelect.length; i++) {let item = allSelect[i];if (item.value=== val[val.length - 1]) {// 得到选中的值和全部的值匹配得到相对应的name值let codeName = item.label;// 截取前5个字nameStr = codeName.substring(0, 5);if (!utils.isEmpty(nameStr)) {break;}}}//如果截取到值，开始循环选中的值，作比较if (!utils.isEmpty(nameStr)) {for (let j = 0; j < a.length - 1; j++) {let selectItem = a[j];allSelect.forEach((allItem) => {if (selectItem === allItem.value) {let name = allItem.lable.substring(0, 5);if (nameStr=== name) {this.value1.splice(j, 1);}}});}}}},
这篇关于Vue 多选下拉框值每组名字的只能选一个的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
