效果展示:
完整代码如下:
<template>
<div class="container">
<div v-for="item in arr">
<el-select v-model="item.name" placeholder="请选择" @change="changeBox">
<el-option
v-for="v in item.options"
:key="v.value"
:label="v.label"
:value="v.value"
:disabled="!getName(item, v)"
>
</el-option>
</el-select>
<el-select v-model="item.value" placeholder="请选择" @change="changeBoxa">
<el-option
v-for="v in item.bb"
:key="v.value"
:label="v.label"
:value="v.value"
:disabled="!getShow(item, v)"
>
</el-option>
</el-select>
</div>
</div>
</template>
<script>
export default{
data(){
return {
obj:{
},
obj1:{},
arr:
[
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
{
name: "",
value: '',
options:[
{
label: 'err',
value: 'errsss',
},
{
label:'dd',
value:'ddsss',
},
{
label:'严重',
value:'serious',
},
],
bb:[
{
label: 'err',
value: 'err',
},
{
label:'dd',
value:'dd',
},
{
label:'严重',
value:'serious',
},
]
},
]
}
},
methods:{
changeBox(){
this.obj = this.filterType(this.arr);
},
changeBoxa(){
this.obj1 = this.filterType1(this.arr);
},
filterType(arr){
let newData = {}
arr.forEach((e, i) => {
if (Object.keys(newData).indexOf('' + e.name) === -1) {
newData[e.name] = []
}
//对应插入属性值
newData[e.name].push(e)
})
return newData
},
filterType1(arr){
let newData = {}
arr.forEach((e, i) => {
if (Object.keys(newData).indexOf('' + e.value) === -1) {
newData[e.value] = []
}
//对应插入属性值
newData[e.value].push(e)
})
return newData
},
getShow(item, v){
console.log('obj', this.obj);
if(!item.name){
return true
} else {
return item.value === v.value || !this.obj[item.name].find(t=>t.value == v.value)
}
},
getName(item, v){
console.log('obj', this.obj);
if(!item.value){
return true
} else {
return item.name === v.value || !this.obj1[item.value].find(t=>t.name == v.value)
}
},
getDisabled(item, v){
if(!item.name){
return false
} else {
return !(item.value === v.value || !this.arr.find(t=>t.value== v.value))
}
}
}
}
</script>