直接上代码,我这边用的是cube-ui的弹窗,内容是自定义的,写完有点后悔了,没自己写弹出框,因为这样搭配用麻烦,标签里面循环的都是数组对象。
<cube-page type="drawer-def" title="Drawer">
<div slot="content" class="ViewsScreen">
<div class="view-wrapper view-wrapperRecord">
<cube-drawer
ref="drawerRecord"
title="筛选"
:data="dataRecord"
:selected-index="selectedIndexRecord"
@cancel="accomplish(2)"
></cube-drawer>
<div v-show="activeRecord">
<p class="littleIcon" @click="accomplish(2)">
<i class="cubeic-close"></i>
</p>
<div class="workScreen workScreenRoll">
<ul>
<div class="worState">工单状态</div>
<li
v-for="(item , index) in worKListA"
:key="index"
@click="WorkClick(index,0)"
:class="{workImgB:arr.includes(index)}"
>{{item.label}}</li>
</ul>
<ul>
<div class="worState">工单评价</div>
<li
v-for="(item , index) in worKListB"
:key="index"
@click="WorkClick(index,(1))"
:class="{workImgB:index==indexChoice}"
>{{item.label}}</li>
</ul>
<ul>
<div class="worState">站点</div>
<li
v-for="(item , index) in worKListC"
:key="index"
@click="WorkClick(index,(2))"
:class="{workImgB:arrIndex.includes(index)}"
>{{item.label}}</li>
</ul>
<ul class="workDataBotton" :class="{'workDataHide':workDataShow}">
<div class="worState">维修负责人</div>
<li
v-for="(item , index) in worKListD"
:key="index"
@click="WorkClick(index,3)"
:class="{workImgB:arrIndexA.includes(index)}"
>{{item.label}}</li>
</ul>
<p v-show="workDataShow"><span @click="spreadShow(0)">展开</span></p>
<p v-show="workDataShow==false"><span @click="spreadShow(1)">缩放</span></p>
</div>
<div class="workBottom workScreenRoll">
<p @click="accomplish(0)">重 置</p>
<p @click="accomplish(1)">完 成</p>
</div>
</div>
</div>
</div>
</cube-page>
// 筛选选中
WorkClick(i, val) {
switch (val) {
case 0:
// this.arr.includes(value) 把i换成value
if (this.arr.includes(i)) {
//includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
//filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
this.arr = this.arr.filter(ele => {
return ele != i;
});
//this.arr=this.arr.filter((ele)=>ele!=i);
//filter()为假时删除
}
else {
this.arr.push(i);
}
break;
case 1:
// 点击取消再点击选中(单选)
if (i != this.indexChoice) {
this.indexChoice = i;
} else {
this.indexChoice = -1;
}
break;
case 2:
if (this.arrIndex.includes(i)) {
this.arrIndex = this.arrIndex.filter(ele => {
return ele != i;
});
} else {
this.arrIndex.push(i);
}
break;
default:
if (this.arrIndexA.includes(i)) {
this.arrIndexA = this.arrIndexA.filter(ele => {
return ele != i;
});
} else {
this.arrIndexA.push(i);
}
}
},
// 筛选
accomplish(val) {
if (val == 0) {
this.arr = [];
this.arrIndex = [];
this.indexChoice = -1;
this.arrIndexA = [];
} else {
this.activeRecord = false;
this.$refs.drawerRecord.hide();
let dataArray = [
...this.arr,
...this.arrIndex,
...this.arrIndexA,
...[this.indexChoice]
];
this.$emit("woekScreenState", dataArray);
if (val == 1) {
//确定后把数据提交后台
console.log(123);
}
}
},
点击后的数据全存在全局变量,给个初始值。
arr: [], arrIndex: [], indexChoice: -1,arrIndexA: [],