贴上代码，可以直接使用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<div>
高区：<select v-model="selectObj.value" @change="handleSelect">
<option
v-for="item in floor"
:key="item.value"
:label="item.label"
v-show="!selectArr.includes(item.value)"
:value="item.value"
></option>
</select>
中区：
<select v-model="selectObj.value2" @change="handleSelect">
<option
v-for="item in floor"
:key="item.value"
:label="item.label"
v-show="!selectArr.includes(item.value)"
:value="item.value"
></option>
</select>
低区：<select v-model="selectObj.value3" @change="handleSelect">
<option
v-for="item in floor"
:key="item.value"
:label="item.label"
v-show="!selectArr.includes(item.value)"
:value="item.value"
></option>
</select>
</div>
</div>
<script src="vue.js"></script>
<script>
const floor = [];
//动态添加的楼层数
for (let i = 1; i < 10; i++) {
floor.push({ value: i, label: i });
}
const vm = new Vue({
el: '#app',
data: {
floor: floor,
selectArr: [], //定义一个空数组，用来存已选值
selectObj: {
value: '',
value2: '',
value3: ''
}
},
methods: {
//select值改变事件
handleSelect() {
this.selectArr = []; //每次清空，添加最新的值
const obj = this.selectObj;
for (const item in obj) {
if (obj[item]) {
this.selectArr.push(obj[item]); //选中的值添加到数组中
}
}
console.log(this.selectArr);
}
}
});
vm.$watch('msg', () => {
console.log('understant');
});
</script>
</body>
</html>
最终效果图：
接下来就是处理相互之间的对应关系，分3⃣️个步骤：
第1⃣️：在生命周期（created或者mounted)添加高区与地区默认值。很重要
第2⃣️：先处理selectArr的数据，排个序（方法很多，此次用数组的sort方法，从小到大）；
handleSelect() {
this.selectArr = []; //每次清空，添加最新的值
const obj = this.selectObj;
for (const item in obj) {
if (obj[item]) {
this.selectArr.push(obj[item]); //选中的值添加到数组中
}
}
console.log(this.selectArr);
this.selectArr.sort((a, b) => a - b); //es6 箭头函数简写法
// this.selectArr.sort(function(a,b) {
// return a-b
// })
}第3⃣️：就是在v-show中进行判断显示与隐藏的关系：
高区的判断条件：数组中倒数第二个数的值 < 楼层值的显示出来：
低区的判断条件：数组中第二个数的值 > 楼层值的显示出来：
中区（或中间部分的处理）：数组最小值小于楼层值和数组最大值大于楼层值：
完整的效果展示
版权声明：本文为gebieren原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。