参考element ui官网的多选属性：

卡片的内容自己定义…

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

转载请附上地址,谢谢合作（CSDN中的文章是我本人账号）

本人CSDN此文章地址：