效果展示:
完整代码如下:
<template><div class="container"><div v-for="item in arr"><el-select v-model="item.name" placeholder="请选择" @change="changeBox"><el-optionv-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-optionv-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>