编程技术 2023-02-04 00:40:12 评论:0    浏览:33    

参考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

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

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

以上内容为【在vue实现element ui中的card(卡片中)使用多选和分页(多选一代码)】的相关内容。

 
免责声明:

本文内容来自用户上传并发布或网络新闻客户端自媒体,本站点仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系删除。

 
0相关评论
打赏