vue element ui 中实现card卡片添加多选框操作

我们有时候会用到card来进行展示数据，但是数据又要进行批量操作，所以在循环的card数据下添加一个多选框能实现相应的功能满足需求。

1、卡片内添加多选框：

 <el-checkbox
              v-if="mutipleSelect"
              v-model="selectionList"
              :label="item.id"
              @change="ids(item.id)"
              >{{ "" }}</el-checkbox
 >

<!---------参数说明：
v-model 代表多选框中显示的状态，选中与非选中，一般绑定一个数组，数组中存在的值就是选中状态。
label   代表多选框中选中的值。
change  多选框改变事件，每次点击改变多选框都触发事件，绑定了一个ids方法。
        （此方法做了一定的数据处理，在选中时将值加进来，取消选中时将值移出去）
-->

2、多选框的函数处理：

 //获取数组中数值的下标
    indexOf(val, ids) {
      for (let i = 0; i < ids.length; i++) {
        //获取当前值的下标
        if (ids[i] === val) {
          return i;
        }
      }
      return -1;
    },

    //多选赋值ids
    ids(val) {
      //检索下标,判断当前值(或对象是否在数组中); 在则返回在的对象,不在则返回-1
      let index = this.indexOf(val, this.selectionList);
      if (this.selectionList.length > 0 && index > -1) {
        //删除数组中的某个元素(在取消勾选时,删除数组中的值)
        this.selectionList.splice(index, 1);
      } else {
        //id添加到数组中
        this.selectionList.push(val);
        //用逗号隔开
        // this.selectionList.join(",");
      }
      // 发射数据给父组件：
      this.$emit("handelSelectionList", this.selectionList);
    },

//此时的selectionList中就是所有选中的id的值。

3、遇到的问题：

此时element checked要点击两次才会显示勾选状态。

原因是：v-model已经改变了@change改变的值，所以相当于改变了两次

解决办法：

将v-model 改为 :value 即可解决

 <el-checkbox
              v-if="mutipleSelect"

              :value="selectionList"

              :label="item.id"
              @change="ids(item.id)"
              >{{ "" }}</el-checkbox
 >