思凡资源网

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

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

<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 idsi='== val)' return i return -1 ids idsval 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此文章地址：
https://blog.csdn.net/qq_46239275/article/details/118360132