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

需求

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

全选+多选

思路

首先我们需要给全选设置一个状态（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
    },

全选

showA