在vue实现element ui中的card(卡片中)使用多选和分页

参考element ui官网的多选属性: https://element-plus.gitee.io/#/zh-CN/component/checkbox

卡片的内容自己定义…
vue使用element ui 实现 card(卡片)的 多选 和 分页；
vue页面代码:(仅供参考)
具体需求按各自需求来

<template>
  <basic-container>
  	<el-row :gutter="12" v-loading="loading">
  	  <!-- date遍历循环的数据 -->
      <el-col :span="6" v-for="item in data" :key="item.id">
        <el-card shadow="hover"><!--style="background-color: #5daf34"  灰 #e1e1e1 绿 #5daf34-->
        	<!-- 卡片的头部位 -->
          <template #header>
            <div class="card-header">
              <!-- 
              	这里声明一下,我在多选时,往数组中添加的是对象
              	label属性:是多选框的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍
              	@change:改变事件,多选框勾选和取消勾选都会触发事件,所以在取消勾选时要删除勾选状态下的值
              -->
              <el-checkbox v-model="checked" :label="item.id" @change="ids(item)">{{name}}</el-checkbox>
              <div>
                <!-- 修改按钮 -->
                <el-button type="text" icon="el-icon-edit-outline" @click="handleUpdate(item)"/>
                <!-- 删除按钮 -->
                <el-button type="text" icon="el-icon-delete" @click="rowDel(item.id)"/>
                <!-- 开关按钮 -->
                <el-button type="text" icon="el-icon-switch-button" @click="devicePowerBtn(item)"/>
              </div>
            </div>
          </template>
          <!-- 卡片显示的内容 -->
          <div>
          	卡片中显示的内容
          </div>
          </el-card>
      </el-col>
    </el-row>
    
    <!-- 分页 -->
    <div class="blockPage">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :page.sync="page"
        :pager-count="10"
        :page-sizes="[12,24,36,48]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
  </basic-container>
</template>

<script>
	import {add, getDetail, getList, remove, update} from "@/api/接口js文件";

	export default {
		data() {
			return {
				//多选默认不选中
				checked = false,
				page: {
          			pageSize: 12,
          			currentPage: 1,
          			total: 0
        		},
        		selectionList: [],
        		data: []
			}
		},
		
		methods: {
			//获取数组中数值的下标
			indexOf(val,ids) {
        		for (let i = 0; i < ids.length; i++) {
        			//获取当前值的下标
          			if (ids[i] === val)
            			return i;
        		}
        		return -1;
      		},
      		//多选赋值ids
      		ids(val) {
        		let ids = this.selectionList;
        		//检索下标,判断当前值(或对象是否在数组中); 在则返回下标,不在则返回-1
        		let index = this.indexOf(val,ids);
        		if (ids.length >0 && index > -1) {
        			//删除数组中的某个元素(在取消勾选时,删除数组中的值)
          			ids.splice(index,1);
        		}else {
        			//添加到数组中
          			ids.push(val);
          			//用逗号隔开
          			ids.join(",");
        		}
      		},
      		
		  //新增接口
	      rowSave(row, done, loading) {
	        add(row).then(() => {
	          this.onLoad(this.page);
	          this.$message({
	            type: "success",
	            message: "操作成功!"
	          });
	          done();
	        }, error => {
	          loading();
	          window.console.log(error);
	        });
	      },
	      //修改接口
	      rowUpdate(row, index, done, loading) {
	        update(row).then(() => {
	          this.onLoad(this.page);
	          this.$message({
	            type: "success",
	            message: "操作成功!"
	          });
	          done();
	        }, error => {
	          loading();
	          console.log(error);
	        });
	      },
		  //删除接口
		  rowDel(row) {
	        this.$confirm("确定将选择数据删除?", {
	          confirmButtonText: "确定",
	          cancelButtonText: "取消",
	          type: "warning"
	        })
	          .then(() => {
	          	//删除
	            return remove(row.id);
	          })
	          .then(() => {
	            this.onLoad(this.page);
	            this.$message({
	              type: "success",
	              message: "操作成功!"
	            });
	          });
      	  },

	      searchReset() {
	        this.query = {};
	        this.onLoad(this.page);
	      },
	      searchChange(params, done) {
	        this.query = params;
	        this.page.currentPage = 1;
	        this.onLoad(this.page, params);
	        done();
	      },
	      selectionClear() {
	        this.$refs.crud.toggleSelection();
	      },
	      currentChange(currentPage) {
	        this.page.currentPage = currentPage;
	      },
	      sizeChange(pageSize) {
	        this.page.pageSize = pageSize;
	      },
	      refreshChange() {
	        this.onLoad(this.page, this.query);
	      },
	      //分页接口
	      onLoad(page, params = {}) {
	        this.loading = true;
	        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
	          const data = res.data.data;
	          this.page.total = data.total;
	          this.data = data.records;
	          this.loading = false;
	          this.selectionClear();
	        });
	      }
      
    }

</script>

显示的效果图:

备注:
在勾选多个时会push到数组中,在取消勾选会删除取消的这个值;

会出现的问题:
如果页面有12条(或者多条)数据(卡片),多选2条以上(勾选多条数据),此时在数组中就会 push 多条数据,在批量操作调用数组的时候,点击批量操作,此时页面会全部勾选上,但是数组的值还是3条,就是页面显示的问题

问题的解决:
添加属性: checked = false

转载请附上地址,谢谢合作