【二级菜单多选与深拷贝的问题 _js基础 _vue相关】

二级菜单多选与深拷贝的问题

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

js基础 vue相关

详细描述

截图

代码

<div class="search-list-first">
            <span>职位类别：</span>
            <div class="search-list-second pointer"
                 v-for="(item, index) in jobtypes"
                 @click="changeType(index)"
                 :class="{selected:item.btn}"
            >
              {{item.type}}
            </div>
          </div>
          <div class="search-list-third" v-if="on">
            <span class="list-third-text pointer"
                  v-for="(item, index) in joblevel"
                  @click="changeLevel(index)"
            >
              {{item.name}}
            </span>
          </div>

data () {
      return {
        on: false,
        jobtypes: [
          {type: '不限', btn: true},
          {id:0, type: '产品', btn: false},
          {id:1, type: 'UI', btn: false},
          {id:2, type: 'QA', btn: false},
          {id:3, type: 'Android', btn: false},
          {id:4, type: 'IOS', btn: false},
          {id:5, type: 'WEB', btn: false},
          {id:6, type: 'OP', btn: false},
          {id:7, type: 'Java', btn: false},
          {id:8, type: 'NLP', btn: false},
          {id:9, type: 'DM', btn: false},
          {id:10, type: 'DL', btn: false}
        ],
        joblevel: [
          {
            name: "产品",
            data: [
              {name: "不限", choose: true},
              {id: 1, name: "助理", choose: false},
              {id: 2, name: "初级", choose: false},
              {id: 3, name: "中级", choose: false},
              {id: 4, name: "高级", choose: false},
              {id: 5, name: "总监", choose: false}
            ]
          },
          {
            name: "UI",
            data: [
              {name: "不限", choose: true},
              {id: 1, name: "初级", choose: false},
              {id: 2, name: "中级", choose: false},
              {id: 3, name: "高级", choose: false},
              {id: 4, name: "总监", choose: false}
            ]
          },

methods: {
      //职业类别多选
      changeType (index) {
        //选项开关
        this.jobtypes[index].btn = !this.jobtypes[index].btn
        //遍历取出不限选项外的btn布尔值
        let arr = []
        for (let i=1; i<this.jobtypes.length; i++) {
          arr.push(this.jobtypes[i].btn)
        }
        //多选数量
        let num = 0
        for (let i=1; i<this.jobtypes.length; i++) {
          if (index !== 0 && this.jobtypes[i].btn === true) {
            num++
          }
        }
        console.log(num)
        //joblevel深拷贝
        // console.log(this.joblevel)
        for (let i=0; i<this.joblevel.length; i++) {
          this.arrlevel.push({name:this.joblevel[i].name,data:this.joblevel[i].data})
        }
        console.log(this.arrlevel)
        console.log(this.joblevel)
        //除不限外的选项都未选
        function check(btn) {
          return btn === false
        }
        let checkBtn = arr.every(check)
        //选项状态变化
        //状态1，不限外的选项都未选
        if (checkBtn === true) {
          this.on = false
          this.jobtypes[0].btn = true
        }
        //状态2，不限外的选项有选
        else if (index !== 0 ) {
          this.jobtypes[0].btn = false
          if (num === 1) {
            this.on = true
            this.joblevel = this.joblevel[index].data
          } else if (num > 1) {
            this.on = false
            this.joblevel = this.arrlevel
          }
        }
        //状态4，选中不限
        else if (index === 0) {
          this.on = false
          this.joblevel = this.arrlevel
          for (let i=1; i<this.jobtypes.length; i++) {
            this.jobtypes[i].btn = false
          }
        }
      },

编辑于2024-05-06