vue Element 中的下拉框不重复,下拉框和下拉框选项是循环的
实现思路有一个数组是存放下拉框的选项,一个局部数组变量存放已经选择的选项循环存放已经选择过的数组,将值加入局部数组变量循环局部数组变量,和传入的值进行对比,如果相等返回true,从而禁用,否则返回false页面结构<divclass="all-test-type"v-for="(item, index) in addForm.examTopic...
·
实现思路
有一个数组是存放下拉框的选项,一个局部数组变量存放已经选择的选项
循环存放已经选择过的数组,将值加入局部数组变量
循环局部数组变量,和传入的值进行对比,如果相等返回true,从而禁用,否则返回false
页面结构
<div
class="all-test-type"
v-for="(item, index) in addForm.examTopicGradeList"
:key="index">
<!-- 初级题目 -->
<div>
<label class="my-lable no-start">{{
item.topicGrade === 1
? "初级:"
: item.topicGrade === 2
? "中级:"
: item.topicGrade === 3
? "高级:"
: "地狱级:"
}}</label>
<div
class="item-test-type"
v-for="(item1, index) in item.examTopicTypeList"
:key="index"
>
<el-select
v-model="item1.topicType"
class="ipt138"
placeholder="请选择题目类型"
>
<el-option
v-for="(itemType, index) in topicType"
:disabled="isSelect(itemType.value,item.topicGrade)"
:key="itemType.value"
:label="itemType.label"
:value="itemType.value"
>
</el-option>
<!-- <el-option
:label="itemType.label"
:value="itemType.value"
:disabled="itemType.disabled"
>
</el-option> -->
</el-select>
<input v-model="item1.topicNum" class="ipt60 deal" type="number" />
<span class="unit">道</span>
<span class="item-score">每道题</span>
<input v-model="item1.topicScore" class="ipt60" type="number" />
<span class="unit">分</span>
<div
class="add-options"
@click="addRoidoQuestion(item.examTopicTypeList, item1.topicType)"
v-if="index == 0"
>
<i class=""></i>
添加选项
</div>
<span
class="el-icon-circle-close add-options-close"
v-if="index >= 1"
@click="deltopic(item.topicGrade, index)"
></span>
</div>
</div>
</div>
实现已选的禁用
// 将选中的项禁用
isSelect(value,rank) {
const selectItemList = [];
let item = this.addForm.examTopicGradeList
for (var i = 0; i < item[rank-1].examTopicTypeList.length; i++) {
selectItemList.push(item[rank-1].examTopicTypeList[i].topicType);
}
// 如果option的value值在已经选择的数组里,则返回false不显示,否则返回true显示
for (let i in selectItemList) {
if (selectItemList[i] === value) {
return true;
}
}
return false;
}
变量说明
selectItemList :局部数组变量,存放已经选择的选项从而进行对比
examTopicTypeList:存放存放已经选择的选项,需要提交给后台
topicType:存放下拉框的下拉选项
更多推荐
已为社区贡献3条内容
所有评论(0)