vant实现select多选效果

最新推荐文章于 2025-03-19 15:30:57 发布

liluo_1227

最新推荐文章于 2025-03-19 15:30:57 发布

阅读量5k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/liluo_1227/article/details/119115246

版权

为解决移动端与PC端select多选一致性问题，通过结合cell单元格与checkbox复选框，自行封装了一个多选组件。该组件利用了vant的popup及cell等组件，并添加搜索功能提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：移动端需要和pc端select多选相对应，但是并没有现成的组件，vant只提供了picker选择器可以实现单选效果，所以需要自己封装组件

方法：把cell单元格和checkbox复选框结合，实现多选效果

代码(js代码根据需要去写就可以啦)

 <van-popup
      v-model="showPicker"
      :value="true"
      @close="closePopup"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <van-search
        :placeholder="placeholder"
        v-model="searchData"
        @search="getColumnList()"
        @input="getColumnList()"
        @clear="getColumnList()"
      ></van-search>
      <!-- v-model="checkedValue" -->
      <van-checkbox-group
        ref="checkboxGroup"
        @change="change"
        v-model="checkedValue"
      >
        <van-cell-group>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="item.specificEventId"
            :title="item.specificEventName"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="checkboxes" shape="square" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-popup>