vue2+elementUI完成添加学生删除学生案列
效果图：
点击添加学生按钮，弹出Dialog,收集用户信息：
el-table中自定义复选框，选中一行，可以点击删除
代码区域：就一个HTML文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生列表</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script></head>
<body><div id="root"><el-button type="primary" @click="add">添加学生</el-button><el-table:data="info"borderstyle="width: 100%"><el-table-columnwidth="200"><template slot-scope="scope"><!-- 复选框点击一个就全选的解决方案：<el-checkbox-group v-model="空数组"><el-checkbox :label="scope.$index"></el-checkbox-group>不显示lable值,在checkbox标签内部加入<br>标签--><el-checkbox-group v-model="che"><el-checkbox v-model="formData.select" :label="scope.$index"><br></el-checkbox></el-checkbox-group></template></el-table-column><el-table-columnprop="grade"label="班级"width="200"></el-table-column><el-table-columnprop="name"label="姓名"width="200"></el-table-column><el-table-columnprop="gender"label="性别"width="200"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnlabel="操作"><template slot-scope="scope"><el-button type="primary" @click="handledelete(scope.$index)">删除学生</el-button></template></el-table-column></el-table><!-- 弹框 --><el-dialogtitle="用户填写":visible.sync="dialogVisible"width="30%":before-close="handleClose"><el-form :model="formData" ref="resetForm" :rules="rules"><el-form-item label="班级" prop="grade"><el-input v-model="formData.grade"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formData.name"></el-input></el-form-item><el-form-item label="性别" prop="gender"><el-radio v-model="formData.gender" label="男">男</el-radio><el-radio v-model="formData.gender" label="女">女</el-radio></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="formData.age"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="handleSubmmit">确 定</el-button></span></el-dialog></div>
</body>
<script type="text/javascript">//设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false;//创建vue实例var vm=new Vue({el:"#root",data(){return {info:[],dialogVisible: false,//表单数据formData:{select: false,grade:'',name:'',gender:'',age:''},che:[],//规则rules: {grade: [{ required: true, message: '请输入班级', trigger: 'blur' }],name: [{ required: true, message: '请选择姓名', trigger: 'blur' }],gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],age: [{ required: true, message: '请选择年龄', trigger: 'blur' }]}}},methods: {add(){this.dialogVisible = true;this.$nextTick(()=>{this.$refs["resetForm"].resetFields();})},handledelete(index){this.info.splice(index,1) //用于添加或删除数组中的元素this.formData.select=false;},handleSubmmit(){//https://blog.csdn.net/qq_58805860/article/details/127161823//push进去的是同一个对象，导致总是相同数据this.info.push({select: this.formData.select,grade:this.formData.grade,name:this.formData.name,gender:this.formData.gender,age:this.formData.age});this.dialogVisible = false},handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});}},});</script>
</html>
相关文章：
vue2+elementUI完成添加学生删除学生案列
效果图： 点击添加学生按钮，弹出Dialog,收集用户信息： el-table中自定义复选框，选中一行，可以点击删除 代码区域：就一个HTML文件 <!DOCTYPE html> <html lang"en"> <head>&…...
对void的深度理解
作者：小树苗渴望变成参天大树 作者宣言：认真写好每一篇博客 作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 ，就 给 作 者 点 点 关 注 吧！ void前言一、 void 关键字二、 void修饰函数返回值和参数三、void指针3.1void * 定义的…...
哪款游戏蓝牙耳机好用？好用的游戏蓝牙耳机推荐
现在，不少人喜欢戴蓝牙耳机玩游戏，而在戴蓝牙耳机玩游戏时难免会产生音画不同步的问题。现在越来越多的蓝牙耳机支持游戏模式，那么，哪款游戏蓝牙耳机好用？接下来，我来给大家推荐几款好用的游戏蓝牙耳机&…...
求职（怎么才算精通JAVA开发）
在找工作的的时候，有时候我们需要对自己的技术水平做一个评估。特别是Java工程师，我们该怎么去表达自己的能力和正确认识自己所处的技术水平呢。技术一般的人，一般都不敢说自己精通JAVA，因为你说了精通JAVA几乎就给了面试官一个可以随便往死里问的理由了。很多不自信的一般…...
C++网络编程(三)IO复用
C网络编程(三)IO复用 前言 多进程/多线程网络服务端在创建进程/线程时，CPU和内存开销很大。因为多线程/进程并发模型，为每个socket分配一个线程/进程。而IO复用采用单个的进程/线程就可以管理多个socket。 select 系统调用原型： #includ…...
第十四届蓝桥杯（第三期）模拟赛试题与题解 C++
第十四届蓝桥杯（第三期）模拟赛试题与题解 C 试题 A 【问题描述】 请找到一个大于 2022 的最小数，这个数转换成十六进制之后，所有的数位（不含前导 0）都为字母（A 到 F）。 请将这个…...
【Hive 基础】-- 数据倾斜
1.什么是数据倾斜？由于数据分布不均匀，导致大量数据集中到一点，造成数据热点。常见现象：一个 hive sql 有100个 map/reducer task， 有一个运行了 20分钟，其他99个 task 只运行了 1分钟。2.产生数据倾斜的原…...
计算机网络笔记——物理层
计算机网络笔记——物理层2. 物理层2.1 通信基础2.1.1 信号2.1.2 信源、信道及信宿2.1.3 速率、波特及码元2.1.4 带宽2.1.5 奈奎斯特定理采样定理奈奎斯特定理2.1.6 香农定理2.1.7 编码与调制调制数字信号调制为模拟信号模拟数据调制为模拟信号编码数字数据编码为数字信号模拟数…...
算法第十七期——状态规划(DP)之动态压缩
一、总述 状态压缩动态规划，就是我们俗称的状压DP，是利用计算机二进制的性质来描述状态的一种DP方式。 应用背景：以集合为状态，且集合可以用二进制来表示，用二进制的位运算来处理。集合问题一般是指数复杂度的&#x…...
2022年全国职业院校技能大赛（中职组）网络安全竞赛试题A模块第八套解析（详细）
2022年全国职业院校技能大赛（中职组） 网络安全竞赛试题 （8） （总分100分） 赛题说明 一、竞赛项目简介 “网络安全”竞赛共分A.基础设施设置与安全加固；B.网络安全事件响应、数字取证调查和应用安全；C.CTF夺旗-攻击；D.CTF夺旗-防御等四个模块。根据比赛实际情况，竞…...
【华为OD机试真题 JAVA】数组中是否存在满足规则的数字组合
标题：数组中是否存在满足规则的数字组合 | 时间限制：1秒 | 内存限制：262144K | 语言限制：不限 给定一个正整数数组，检查数组中是否存在满足规则的数字组合 * 规则： * A = B + 2C 输入描述： * 第一行输出数组的元素个数。 * 接下来一行输出所有数组元素，用空格…...
【OpenCV技能树】——OpenCV基础
前言： 😊😊😊欢迎来到本博客😊😊😊 目前正在进行 OpenCV技能树的学习，OpenCV是学习图像处理理论知识比较好的一个途径，至少比看书本来得实在。本专栏文章主要记录学习Op…...
人体姿态识别
自留记录论文阅读，希望能了解我方向的邻域前沿吧 粗读，持续更新 第一篇 ATTEND TO WHO YOU ARE: SUPERVISING SELF-ATTENTION FOR KEYPOINT DETECTION AND INSTANCE-AWARE ASSOCIATION 翻译：https://editor.csdn.net/md?not_checkout=1&spm=1001.2014.3001.5352&…...
ubuntu下调试驱动
使用 Ubuntu Linux 测试 Linux 驱动 1. 测试 Linux 驱动准备工作 对于一个 Linux 驱动程序，一开始可以在 Ubuntu Linux 上做前期开发和测试。对于访问硬件部分也可以在 Ubuntu Linux 用软件进行模拟,切记不能代替真实的环境！当基本开发完成后&#…...
第十四届蓝桥杯三月真题刷题训练——第 9 天
第 1 题：找素数 题目描述 本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。 素数就是不能再进行等分的整数。比如：7，11。而 9 不是素数，因为它可以平分为 3 等份。一般认为最小的…...
操作系统复习
熟练掌握操作系统的定义，操作系统的特征，操作系统的功能熟练掌握多道程序设计的概念，单道程序设计和多道程序设计的区别，多道程序设计的优点熟悉操作系统接口的主要功能，系统调用的基本概念、类型、实现。操作系统接口…...
springboot健身房管理系统
springboot健身房管理系统 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍…...
C语言学习笔记——数组
前言 数组是C语言中的一种自定义数据类型，它的使用非常广泛。但是很多新手在使用数组时，经常在一些细节上出问题，导致程序崩溃或者无法编译。今天，我就来详细聊聊数组的使用和我注意到的一些细节。 一、常见的数组类型与数组的创建…...
类和对象 - 中
本文已收录至《C语言》专栏！ 作者：ARMCSKGT 目录 前言 正文 构造函数 对比C和C的初始化 构造函数的使用与特性 默认构造函数 C11关于默认构造缺陷的补丁 析构函数 析构函数特性 默认析构和自定义析构 拷贝构造函数 问题聚焦 拷贝构造的定…...
Android之屏幕适配方案
在说明适配方案之前，我们需要对如下几个概念有所了解：屏幕尺寸，屏幕分辨率，屏幕像素密度。 屏幕尺寸 屏幕尺寸指屏幕的对角线的物理长度，单位是英寸，1英寸2.54厘米。 比如常见的屏幕尺寸：5.0、5…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）
上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）
考察一般的三次多项式，以r为参数： p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]； 此多项式的根为： 尽管看起来这个多项式是特殊的，其实一般的三次多项式都是可以通过线性变换化为这个形式…...