headercard是什么意思？用法、例句 在vue实现element ui中的card(卡片中)使用多选和分页

今天给各位分享headercard是什么意思？用法、例句的知识，其中也会对在vue实现element ui中的card(卡片中)使用多选和分页进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

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

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

3、<template>\n<basic-container>\n\t<el-row:gutter="12"v-loading="loading">\n\t<!--date遍历循环的数据-->\n<el-col:span="6"v-for="itemindata":key="item.id">\n<el-cardshadow="hover"><!--style="background-color:#5daf34"灰#e1e1e1绿#5daf34-->\n\t<!--卡片的头部位-->\n<template#header>\n<divclass="card-header">\n<!--\n\t这里声明一下,我在多选时,往数组中添加的是对象\n\tlabel属性:是多选框的值,若该标签中无内容,则该属性也充当checkbox按钮后的介绍\n\t@change:改变事件,多选框勾选和取消勾选都会触发事件,所以在取消勾选时要删除勾选状态下的值\n-->\n<el-checkboxv-model="checked":label="item.id"@change="ids(item)">{{name}}</el-checkbox>\n<div>\n<!--修改按钮-->\n<el-buttontype="text"icon="el-icon-edit-outline"@click="handleUpdate(item)"/>\n<!--删除按钮-->\n<el-buttontype="text"icon="el-icon-delete"@click="rowDel(item.id)"/>\n<!--开关按钮-->\n<el-buttontype="text"icon="el-icon-switch-button"@click="devicePowerBtn(item)"/>\n</div>\n</div>\n</template>\n<!--卡片显示的内容-->\n<div>\n\t卡片中显示的内容\n</div>\n</el-card>\n</el-col>\n</el-row>\n\n<!--分页-->\n<divclass="blockPage">\n<el-pagination\n@size-change="sizeChange"\n@current-change="currentChange"\n:page.sync="page"\n:pager-count="10"\n:page-sizes="[12,24,36,48]"\n:page-size="page.pageSize"\nlayout="total,sizes,prev,pager,next,jumper"\n:total="page.total">\n</el-pagination>\n</div>\n</basic-container>\n</template>\n\n<script>\n\timport{add,getDetail,getList,remove,update}from"@/api/接口js文件";\n\n\texportdefault{\n\t\tdata(){\n\t\t\treturn{\n\t\t\t\t//多选默认不选中\n\t\t\t\tchecked=false,\n\t\t\t\tpage:{\n\t\t\tpageSize:12,\n\t\t\tcurrentPage:1,\n\t\t\ttotal:0\n\t\t},\n\t\tselectionList:[],\n\t\tdata:[]\n\t\t\t}\n\t\t},\n\t\t\n\t\tmethods:{\n\t\t\t//获取数组中数值的下标\n\t\t\tindexOf(val,ids){\n\t\tfor(leti=0;i<ids.length;i++){\n\t\t\t//获取当前值的下标\n\t\t\tif(ids[i]===val)\n\t\t\treturni;\n\t\t}\n\t\treturn-1;\n\t\t},\n\t\t//多选赋值ids\n\t\tids(val){\n\t\tletids=this.selectionList;\n\t\t//检索下标,判断当前值(或对象是否在数组中);在则返回下标,不在则返回-1\n\t\tletindex=this.indexOf(val,ids);\n\t\tif(ids.length>0&&index>-1){\n\t\t\t//删除数组中的某个元素(在取消勾选时,删除数组中的值)\n\t\t\tids.splice(index,1);\n\t\t}else{\n\t\t\t//添加到数组中\n\t\t\tids.push(val);\n\t\t\t//用逗号隔开\n\t\t\tids.join(",");\n\t\t}\n\t\t},\n\t\t\n\t\t//新增接口\n\trowSave(row,done,loading){\n\tadd(row).then(()=>{\n\tthis.onLoad(this.page);\n\tthis.$message({\n\ttype:"success",\n\tmessage:"操作成功!"\n\t});\n\tdone();\n\t},error=>{\n\tloading();\n\twindow.console.log(error);\n\t});\n\t},\n\t//修改接口\n\trowUpdate(row,index,done,loading){\n\tupdate(row).then(()=>{\n\tthis.onLoad(this.page);\n\tthis.$message({\n\ttype:"success",\n\tmessage:"操作成功!"\n\t});\n\tdone();\n\t},error=>{\n\tloading();\n\tconsole.log(error);\n\t});\n\t},\n\t\t//删除接口\n\t\trowDel(row){\n\tthis.$confirm("确定将选择数据删除?",{\n\tconfirmButtonText:"确定",\n\tcancelButtonText:"取消",\n\ttype:"warning"\n\t})\n\t.then(()=>{\n\t\t//删除\n\treturnremove(row.id);\n\t})\n\t.then(()=>{\n\tthis.onLoad(this.page);\n\tthis.$message({\n\ttype:"success",\n\tmessage:"操作成功!"\n\t});\n\t});\n\t},\n\n\tsearchReset(){\n\tthis.query={};\n\tthis.onLoad(this.page);\n\t},\n\tsearchChange(params,done){\n\tthis.query=params;\n\tthis.page.currentPage=1;\n\tthis.onLoad(this.page,params);\n\tdone();\n\t},\n\tselectionClear(){\n\tthis.$refs.crud.toggleSelection();\n\t},\n\tcurrentChange(currentPage){\n\tthis.page.currentPage=currentPage;\n\t},\n\tsizeChange(pageSize){\n\tthis.page.pageSize=pageSize;\n\t},\n\trefreshChange(){\n\tthis.onLoad(this.page,this.query);\n\t},\n\t//分页接口\n\tonLoad(page,params={}){\n\tthis.loading=true;\n\tgetList(page.currentPage,page.pageSize,Object.assign(params,this.query)).then(res=>{\n\tconstdata=res.data.data;\n\tthis.page.total=data.total;\n\tthis.data=data.records;\n\tthis.loading=false;\n\tthis.selectionClear();\n\t});\n\t}\n\n}\n\n</script>

显示的效果图：

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

5、会出现的问题：

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

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

8、本人CSDN此文章地址：https://blog.csdn.net/qq_46239275/article/details/118360132

headercard是什么意思？用法、例句和在vue实现element ui中的card(卡片中)使用多选和分页的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！