vueダイナミックループの複数のselectが出現したdisabled(インスタンスコード)
vueダイナミックループの複数のselectが出現したのはdisabledになります。
以上は小编がみんなに分かち合うvue动态循环の出す複数のselectの出現したことがあるdisabled効果で、みんなに対してある程度助けがあることを望みます!
<template>
<div class="artcle">
<el-form
label-width="100px"
:model="testForm">
<el-form-item
v-for="(vtem, index) in testForm.version"
:key="index"
label=" ">
<el-select
@change="comChange"
v-model="vtem.ver">
<el-option
v-for="item in versionList"
:key="item.id"
:value="item.id"
:disabled="item.id == vtem.ver || selectedArr.includes(item.id)"
:label="item.name">
</el-option>
</el-select>
<el-button
icon="el-icon-circle-plus-outline"
size="small"
@click="add(index)"
circle></el-button>
<el-button
icon="el-icon-remove-outline"
size="small"
@click="remove(index)"
:disabled="index === 0"
circle></el-button>
</el-form-item>
<el-form-item
label=" ">
<el-input
v-model="testForm.input"></el-input>
</el-form-item>
</el-form>
</div>
</template>
ps:vueダイナミックループした複数のselectは同じデータを繰り返し選択できません。
<template>
<div class="program" v-for="(parItem,index) in parArr" :key="parItem.guid">
<Select v-model="parItem.id" @on-change="onChangeProgram">
<Option v-for="(subItem,idx) in programList" :key="subItem.id" :data-index='idx'
v-show="parItem.id == subItem.id || !selectIdsArr.includes(subItem.id)"
:value="subItem.id> {{subItem.name}}</Option>
</Select>
</div>
</template>
<script>
export default {
data() {
return {
parArr:[],
selectIdsArr:[],
programList:[{
"id":1,
"name":" 1"
},{
"id":2,
"name":" 2"
},{
"id":3,
"name":" 3"
}],
}
},
methods: {
onChangeProgram() {
this.selectIdsArr = [];
for (const item of this.parArr) {
if (item.id) {
this.selectIdsArr.push(item.id);
}
}
},
},
}
</script>
締め括りをつける以上は小编がみんなに分かち合うvue动态循环の出す複数のselectの出現したことがあるdisabled効果で、みんなに対してある程度助けがあることを望みます!