楼层号按顺序进行筛选,且不重复的方法(优化版)

本文介绍了一种优化方法,用于在前端Vue.js项目中实现楼层号的筛选,确保添加时顺序正确且不重复,适用于处理大量数据和一次性添加多个楼层的情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上次的方法不适合大量添加,且不适合一次性添加多个在选择,这次通过使用优化的方法进行判断,功能强大了。

 <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大法进行看效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值