上次的方法不适合大量添加,且不适合一次性添加多个在选择,这次通过使用优化的方法进行判断,功能强大了。
<div id="app">
<div>
<ul>
<li v-for="(item,index) in floorlist" :key="index">
<span>{{item.floor}}</span>
<select
v-model="item.floor"
:disabled="index === 0 || index === floorlist.length - 1"
>
<option
v-for="items in vilidarFloor(floorlist, index, floors)"
:key="items.label"
:label="items.label"
:value="items.value"
></option>
</select>
<button @click="del(index)">删除一行</button>
<button @click="add(index)">添加一行</button>
</li>
</ul>
</div>
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
floors: [1, 2, 3, 4, 5, 6, 7, 8, 9, 12, 34],
floorlist: []
},
created() {
this.floorlist = [
{ id: 1, floor: this.floors[this.floors.length - 1] },
{ id: 2, floor: this.floors[0] }
];
},
methods: {
add(index) {
this.floorlist.splice(index + 1, 0, {
id: Math.random(),
floor: ''
});
console.log(this.floorlist);
},
del(index) {
this.floorlist.splice(index, 1);
},
vilidarFloor(floorlist, index, floors) {
floors = floors.map(item => {
return { value: item, label: item };
});
const floorlimit = {};
//遍历上层区
for (let i = index - 1; i >= 0; i--) {
const floorNo = floorlist[i].floor;
if (floorNo) {
floorlimit.higher = floorNo;
break;
}
}
//遍历下层区
for (let i = index + 1; i <= floorlist.length - 1; i++) {
const floorNo = floorlist[i].floor;
if (floorNo) {
floorlimit.lower = floorNo;
break;
}
}
// console.log('lim', floorlimit);
let result = {};
if (index === 0 || index === floorlist.length - 1) {
result = floors;
} else {
result = floors.filter(
item =>
item.value > floorlimit.lower &&
item.value < floorlimit.higher
);
}
return result.reverse();
}
}
});
</script>
之间cv大法进行看效果: