Vue 实现全选、多选、单选效果

JacksonChen_

已于 2024-03-28 16:51:00 修改

阅读量4.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-08-05 14:21:39 首次发布

本文链接：https://blog.csdn.net/chenyajundd/article/details/132117423

本文详细介绍了如何在Vue中实现全选、多选和单选功能，包括思路和代码实现。全选功能通过设置一个全局状态控制，多选则通过遍历并更新每个子项的状态。单选时，需要额外维护一个当前选中项的索引来实现状态切换。提交时，只需筛选出checked为true的项。

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

需求

假如这里有多个卡片，点击相应卡片之后需要提交卡片内信息，我们需要把点击的卡片筛选出来，在不使用组件库的前提下实现全选，多选，单选操作（其中全选和多选为一个需求，单选为一个需求）

全选+多选

思路

首先我们需要给全选设置一个状态（showAllSelected），用此状态来控制全显是否点击。那怎么控制每个卡片的状态呢？由于数据是后端请求得到，我们需要对请求的数据进行改造，添加checked属性来控制是否点击每个卡片。

代码实现

HTML

    <!-- 多选 -->
    <template>
      <div style="display: flex">
        <span>全选</span>
        <span
          :style="{
            backgroundColor: showAllSelected ? '#009aff' : '#fff',
            borderColor: showAllSelected ? 'transparent' : 'black',
          }"
          class="circle"
          @click="handleselectedAll"
          >{
  { showAllSelected ? '√' : '' }}</span
        >
      </div>

      <div class="item-detail" v-for="(tmp, index) in itemData" :key="index">
        <div class="module-item">
          <span>序号：{
  { tmp.flowOrder }}</span>
          <span
            :style="{
              backgroundColor: tmp.checked ? '#009aff' : '#fff',
              borderColor: tmp.checked ? 'transparent' : 'black',
            }"
            class="circle"
            @click="handleMultiple(index)"
            >{
  { tmp.checked ? '√' : '' }}</span
          >
        </div>
      </div>
    </template>

首先对后端请求数据进行改造，为每个item添加checked属性

    handleData() {
      let returnData = [
        {
          flowOrder: 1,
        },
        {
          flowOrder: 2,
        },
        {
          flowOrder: 3,
        },
      ]
      returnData.forEach((item) => {
        item.checked = false
      })
      this.itemData = returnData
    },