vue 移动端制作筛选，可多选、单选、重置

直接上代码，我这边用的是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)">重 &nbsp;置</p>
              <p @click="accomplish(1)">完 &nbsp;成</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: [],