vue 实现选项卡多选功能,点击选中,再点击取消选中,选中显示高亮
程序员文章站
2022-03-04 14:39:27
本次做的这个选项卡的数据是一个对象,平常的都是数组,话不多说上代码html部分 ...
{{ item }}
本次做的这个选项卡的数据是一个对象,平常的都是数组,话不多说上代码
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,这样就实现的基本功能
本文地址:https://blog.csdn.net/weixin_49696014/article/details/112583803