vant+checkbox+搜索：多选出现点击错乱

最新推荐文章于 2024-05-21 11:40:29 发布

m0_59325389

最新推荐文章于 2024-05-21 11:40:29 发布

阅读量1.1k

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/m0_59325389/article/details/125448819

版权

需求：用户点击出现弹框，在弹框里面可以进行多个项目的选择，也可搜索选择项目。

出现问题：在搜索之后选择项目出现点击错乱的问题，点击弹框不在搜索的情况下则不会有这个问题。

错误原因：由于checkbox是根据index来进行选择，在搜索的情况下，重新获取列表，导致index错乱导致。

代码：

    <van-popup v-model="showSiteList" position="bottom" :style="{ height:'50%' }" >
      <div class="select" v-if="!showSearch">
        <div class="search" @click="showSearch=true">搜索</div>
        <div class="selectPro">选择</div>
        <div class="confirm" @click="comfirmSearch">确定</div>
      </div>
      <div v-else class="pop-search van-hairline--bottom">
          <van-field
            v-model="searchvValue"
            placeholder="搜索"
            :formatter="formatter"
            :border="false"
            name="search"
            autocomplete="off"
            class="mot-input"
            clearable
            @input="
              e => {
                onSearch(e)
              }
            "
            maxlength="20"
          >
            <template #extra>
              <span
                style="padding: 0 10px;color: #1677FF;font-size: 15px; line-height: 32px"
                @click="comfirmSearch"
                >确定</span
              >
            </template>
          </van-field>
      </div>
      <van-checkbox-group v-model="result" v-if="siteList.length > 0" @change="selectChange">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in siteList"
            clickable
            :key="item.id"
            :title="item.title"
            @click="toggle(item.id)"
          >
            <template #right-icon>
              <van-checkbox :name="item.id" ref="checkboxes"/>
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <div v-else>
        <div v-if="isfinished">
          <div class="no_data">暂无数据</div>
        </div>
        <div v-else class="no_data">
          <van-loading/>
        </div>
      </div>
    </van-popup>

    toggle(id,item) {
      // 解决方案
      if(this.result.includes(id)){
        let index = this.result.findIndex(item => item == id)
        this.result.splice(index, 1)
      }else {
        this.result.push(id)
      }

      // this.$refs.checkboxes[index].toggle(); 出现问题代码
    },