本次做的这个选项卡的数据是一个对象,平常的都是数组,话不多说上代码

html部分

<div class="tab1">
     <div id="box1" v-for="(item,key, index) in obj1" :key="index" @click="selected_1(key)" 
     :class="{ 'active':active_tab1.indexOf(key)>-1}">{{ item }}</div>
</div>

js部分

data中需要定义的数据

// 员工状态选项卡数据
    obj1: {},
// 员工状态控制选中高亮
    active_tab1: [],
selected_1(key) {
      let arrIndex = this.active_tab1.indexOf(key);
      if(arrIndex>-1){   // 已选中,点击取消
          this.active_tab1.splice(arrIndex,1);
      }else{  // 未选中,点击选中
         this.active_tab1.push(key);
      }
    },

ok,这样就实现的基本功能

Logo

前往低代码交流专区

更多推荐