02 elementplus前端增删改查【小白入门SpringBoot+Vue3】

视频教程来源于 B站青戈
https://www.bilibili.com/video/BV1H14y1S7YV

只用elementplus，学点增删改查，还没有于后端连接起来，具体在下一篇

搭建一个小页面，显示数据

补充：webstorm格式化代码，修改了快捷键 Alt + F 。

利用elementplus官网的组件，来到src/views/HomeView.vue ，先搭建一个小按钮，使用el-button标签，然后加一个表格标签。这是静态页面

<template><div class="box"><el-button class="button" type="primary" round>按钮</el-button><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180"/><el-table-column prop="name" label="Name" width="180"/><el-table-column prop="address" label="Address"/></el-table></div>
</template><style>
.box{margin: 20px;
}
</style>

紧接着，在表格里面加点数据，官网里面就有的

<script setup>
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>

讲讲，为什么上面这样子加入数据，能完全对应到表格中。

<el-table-column prop="date"/> 表格每列数据，有个prop属性，其属性值是date，然后加入数据的时候，date: '2016-05-02' ，里面的date就是属性值，这样就能把’2016-05-02’，对应放到 prop="date"这一列。其他列同理。


<el-table-column label="Date"/> ，label=“Date”，表示这一列，显示给用户看的列名为Date ，也可以改成中文“日期”


<el-table-column width="180"/> ，width=“180”，表示这一列的宽度为180 ，可以根据需要更改。若删除width=“180”，那么列宽由系统自适应。


增加数据

预想，点击按钮，增加数据，有个弹窗，让用户填写要增加的数据。

弹窗，用Dialog 组件，如下图，点击红框处，会弹出一个表单，是我们想要的内容a6

在这里插入图片描述

然后就复制对应代码，放到src/views/HomeView.vue

  <!-- Form --><el-dialog v-model="dialogFormVisible" title="Shipping address"><el-form :model="form"><el-form-item label="Promotion name" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off" /></el-form-item><el-form-item label="Zones" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="Please select a zone"><el-option label="Zone No.1" value="shanghai" /><el-option label="Zone No.2" value="beijing" /></el-select></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogFormVisible = false">Cancel</el-button><el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button></span></template></el-dialog>

上面只是复制粘贴，得到静态页面，真正实现点击弹窗表单，还需要在js写代码。
elementplus官网也有对应的js的代码，可以参考写进去，相应的reactive, ref也要导入才能正常使用。

  • ref表示数据是响应式的，若有更改，会及时改变。但凡用到ref类型的数据值，必须加value

  • dialogFormVisible 的值是布尔值，true或false

import {reactive, ref} from "vue";
const dialogFormVisible = ref(false)      //表单是否弹出来
const form = reactive({})  //表单数据

接着，弹窗出来的表单，需根据实际情况，进行相应更改。

  • 对照官网的弹窗表单效果图，可发现，label="Promotion name"，label的值，对应弹窗表单的左边文本；
  • 于是，可以对照上面表格的的列信息，修改弹窗表单的左边文本。
  • 相应地，label-width表示表单左边文本的宽度，文本宽度可以统一写在上一级标签元素，即<el-form :model="form" label-width="100px"> 。
 原本
<el-form :model="form" ><el-form-item label="Promotion name" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"/><el-form-item>修改后
<el-form :model="form" label-width="80px" style="padding-right: 40px"><el-form-item label="日期"><el-input v-model="form.date" autocomplete="off"/><el-form-item>
  • title=“Shipping address” ，title对应弹窗的标题文本们可以按需修改，即title=“信息”
原本
<el-dialog v-model="dialogFormVisible" title="Shipping address">修改
<el-dialog v-model="dialogFormVisible" title="信息">
  • 弹窗表单的按钮文本，默认是英文"Cancel"，修改为中文“取消” 。Confirm翻译为“确认”
原本
<el-button @click="dialogFormVisible = false">Cancel</el-button>修改
<el-button @click="dialogFormVisible = false">取消</el-button>

如下图可以明显看出修改的属性值，在弹窗显示中做出了相应改变。

在这里插入图片描述


弹窗的表单静态页面信息编辑好了，还需要把点击”增加数据“按钮，出来弹窗的功能做好，修改按钮的代码如下。

原始
<el-button class="button" type="primary" round >按钮</el-button>修改
<el-button class="button" type="primary" round @click="dialogFormVisible=true">新增数据</el-button>

下个功能。

弹出表单窗口，填写好数据，点击”确认“按钮后，需要把数据插入到表格中。那么在“确认”按钮中，加入监听函数。

原始的
<el-button type="primary" @click="dialogFormVisible = false">确认</el-button>修改后
<el-button type="primary" @click="save">确认</el-button>

相应地，要把save函数具体实现什么功能的代码写到js。

tableData.push()函数可以把数据插入到表格末尾（补充，tableData名字来源于 <el-table :data="tableData"> ，这表格的数据绑定在tableData上）。

但是push函数插入的数据类型要求一致，tableData此时是对象类型数据，而我们的from表单数据是reactive类型，类型不匹配。

为了保持类型一致，必须改变其中一个类型。所以改变tableData的类型，改为reactive响应式数据。

<script setup>
const tableData = reactive([{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},])const save = ()=>{// 向表格添加数据tableData.push(form);// 关闭弹窗dialogFormVisible.value = true; 
}</script>

发现了问题。

关闭弹窗后，再打开，仍然保留上次输入的数据，这样不行。每次打开弹窗，输入框的数据需要保持清空。

为了实现这个功能，需要增加一个函数。

原来
<el-button class="button" type="primary" round @click="dialogFormVisible=true">新增数据</el-button>修改
<el-button class="button" type="primary" round @click="handleAdd()">新增数据</el-button>

handleAdd()函数对应的js代码

// form改成let类型，是因为const数据原则上不可更改，但是let可以
let form = reactive({})const handleAdd = ()=>{// 打开弹窗dialogFormVisible.value=true;//  清空数据。这样子不会指向上次的遗留数据 ，还会清空上次遗留的数据。form = reactive({})
}

编辑、删除数据

在页面上，增加“编辑”、“删除”。去elementplus官网寻找合适的样式组件，如下图，看中了右边红色框中的样式

在这里插入图片描述

复制对应代码，并适当修改。

补充：

  • 在Vue3中，#default="scope"是一种用于处理列表渲染的语法。它允许在父组件中定义一个插槽，并通过子组件将数据传递给插槽。这样就可以在父组件中使用子组件的数据，并根据需要进行渲染。
  • scope.row→拿到每一行的数据
  • scope.$index→拿到每一行的index
  • @click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件
原始
<el-table-column fixed="right" label="Operations" width="120"><template #default><el-button link type="primary" size="small" @click="handleClick">Detail</el-button><el-button link type="primary" size="small">Edit</el-button></template></el-table-column>修改
<el-table-column fixed="right" label="操作" width="120"><template #default="scope"><el-button link type="primary" size="small" @click="handleClick(scope.row)">修改</el-button><el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button></template>
</el-table-column>

修改细节如下;

  • <el-table-column label="Operations" > ， 新增列，其列名为“操作”，故修改label=“操作”
  • <template #default> ，为了让列表的数据可以传递 ，故#default=“scope”
  • <el-button>Detail</el-button> ，按钮名字分别改为“修改”和“删除”。故<el-button>修改</el-button>
  • @click=“handleClick” ，为了让”修改“按钮和”删除“按钮实现相应的功能，需要添加对应参数，正好利用上#default="scope"的功能。故@click=“handleClick(scope.row)”，以及，@click.prevent=“remove(scope.$index)”
  • <el-button link type="primary"> ，”删除“按钮的样式，为了区分+不轻易删除，故改为醒目的样式，故type="danger">

页面效果如下
在这里插入图片描述

静态页面搭建好了，要把涉及到的函数实现。

先实现删除操作，其实elementplus官网有删除操作的js代码，可以复制过来修改。修改好后，删除操作就实现了。

原始（index: number  这个是typesccript语法，number表示参数的类型）
const deleteRow = (index: number) => {tableData.value.splice(index, 1)
}修改
const remove = (index) => {//splice函数 从index的位置开始，删除一行  。 删掉value，是因为tableData数据现在是reactive类型tableData.splice(index, 1)
}

接下来搞编辑操作。

const handleEdit = (row)=>{// 先把这行数据放进弹出表单里form = reactive(row)// 再打开表单dialogFormVisible.value =true
}

上面的代码已经能实现编辑数据了，但是有一个缺点。就是打开表单窗口编辑的时候，表格对应这一行的数据也立马改变。

这样不对，应该是，提交确认按钮后，修改对应这一行的数据。

所以，还要修改代码。

可以先创建一个空对象，把这行对应的数据存储在这个空对象里面，等确认编辑好后，再把编辑好的数据放进这一行。

与此同时，这个函数还需要一个参数scope.$index ，新增一个变量globaIndex。具体代码修改如下

<el-button link type="primary" size="small" @click="handleEdit(scope.row , scope.$index)">修改</el-button>let globalIndex = ref(-1) //全局变量const save = () => {if (globalIndex.value > -1) { //编辑数据 。保存表格中，某行编辑好的数据tableData[globalIndex.value] = form;globalIndex.value = -1} e             lse { //新增数据// 向表格添加数据tableData.push(form);}// 关闭弹窗dialogFormVisible.value = false;
}const handleEdit = (row, index) => {//创建一个空对象，把这行的的数据存储在这个空对象里面，等确认编辑好后，再改变表格对应这一行的数据。const newObj = Object.assign({}, row)// 把这行数据放进准备弹出表单里form = reactive(newObj)globalIndex.value = index;// 再打开弹出表单dialogFormVisible.value = true
}

重点！！！！let globalIndex = ref(-1) //全局变量，但凡用到globalIndex的值的时候，必须加上.vaalue


查询数据

在表格上面，加入一个输入框和一盒查询按钮。

刚开始这是静态页面，但是需要加入查询功能。

补充：

  • ref 和reactive都是响应式类型，但是ref适用于单一数字、字符串、布尔值等简单数据，reactive更适合对象、数组等复杂数据
  • clearable 属性用于在输入框内末尾添加删除图标，可用于清空当前输入框内容
  • v-model=“input” ，Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据
原来
<el-input placeholder="Please input" />
<el-button class="button" type="primary">按钮</el-button>
修改
<el-input v-model="input" placeholder="请输入" style="width: 250px" clearable/>
<el-button class="button" type="primary" round @click="search" style="margin: 5px">查询数据</el-button>

相应地，实现search函数的js代码.

tableData从reactive类型，改会ref类型。因为reactive类型很难用filter函数查出的是代理Proxy数据，没办法将筛选结果赋值给tableData。所以还是改回ref，注意，涉及到tableData的时候，就要加上.value 。

let input_search = ref('') //初始值为空
let tableData = ref([{date: '2017-05-03',name: 'Jerry',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
])const search = ()=>{tableData.value  =tableData.value.filter(v=>v.name.includes(input.value))
}

以上是查询方法实现的一种，还有另一种，就是新建一个reactive类型的变量，然后把tableData包裹起来。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/194551.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

国学---佛系算吉凶~

国学---佛系算吉凶~

佛系算吉凶咯~&#xff0c;正经走访深山庙宇&#xff0c;前辈老人&#xff0c;经过调研后&#xff0c;搭建的轻衍计算模型&#xff0c;团队对国学的初次信息化尝试。 共享给有需要的朋友&#xff0c;准不准没关系&#xff0c;开心最重要。 后续还有财富&#xff0c;事业&…
阅读更多...
python表白弹框

python表白弹框

# codinggbk import tkinter as tk import random# 创建主窗口并隐藏 root tk.Tk() root.attributes(-alpha, 0) # 设置主窗口为不可见# 表白内容 message "cnmsb"# 创建弹框函数 def create_popup():x random.randint(0, root.winfo_screenwidth()) # 随机生成…
阅读更多...
VisualBox7.0.12 主机和宿舍互PING设置

VisualBox7.0.12 主机和宿舍互PING设置

设置成桥接模式 主机设置 虚拟机设置
阅读更多...
Java面向对象（高级）-- 单例(Singleton)设计模式

Java面向对象（高级）-- 单例(Singleton)设计模式

文章目录 一、单例设计模式&#xff08;1&#xff09; 设计模式概述&#xff08;2&#xff09; 何为单例模式&#xff08;3&#xff09; 实现思路&#xff08;4&#xff09; 单例模式的两种实现方式1. 饿汉式2. 懒汉式3. 饿汉式 vs 懒汉式 &#xff08;5&#xff09; 单例模式的…
阅读更多...
a标签下载文件与解决浏览器默认打开某些格式文件的问题

a标签下载文件与解决浏览器默认打开某些格式文件的问题

前言 在实际项目中&#xff0c;我们通常会遇到这么一个需求&#xff1a;后端给前端返回一个任意文件类型的完整的url路径&#xff0c;前端拿到这个路径直接通过浏览器下载文件到本地。我想大家应该都会首先想到使用HTML中的<a>标签&#xff0c;&#xff0c;因为<a>…
阅读更多...
【WSL/WSL2-Ubuntu】突破界限：不使用服务器在一台Windows搭建Nginx+FastDFS

【WSL/WSL2-Ubuntu】突破界限：不使用服务器在一台Windows搭建Nginx+FastDFS

打造超级开发环境&#xff1a;Nginx和FastDFS在WSL中的完美结合 前言 随着软件开发领域的快速发展&#xff0c;跨平台的开发环境变得日益重要。Windows Subsystem for Linux&#xff08;WSL&#xff09;和WSL 2为开发者提供了在Windows操作系统上体验Linux环境的便捷途径。本…
阅读更多...
EMD、EEMD、FEEMD、CEEMDAN分解的对比(其中CEEMDAN分解可以有效消除模态分解)

EMD、EEMD、FEEMD、CEEMDAN分解的对比(其中CEEMDAN分解可以有效消除模态分解)

理论部分 EMD (Empirical Mode Decomposition)、EEMD (Ensemble EMD)、FEEMD (Fast Ensemble EMD) 和 CEEMDAN (Complete Ensemble EMD with Adaptive Noise) 是一些常用的信号分解方法&#xff0c;它们在信号分解的效果和特性上有所区别。 1. EMD&#xff1a; - EMD是最基础…
阅读更多...
2023年【安全员-B证】考试内容及安全员-B证考试资料

2023年【安全员-B证】考试内容及安全员-B证考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全员-B证考试内容参考答案及安全员-B证考试试题解析是安全生产模拟考试一点通题库老师及安全员-B证操作证已考过的学员汇总&#xff0c;相对有效帮助安全员-B证考试资料学员顺利通过考试。 1、【多选题】《中华人民…
阅读更多...
图像分类(六) 全面解读复现MobileNetV1-V3

图像分类(六) 全面解读复现MobileNetV1-V3

MobileNetV1 前言 MobileNetV1网络是谷歌团队在2017年提出的&#xff0c;专注于移动端和嵌入设备的轻量级CNN网络&#xff0c;相比于传统的神经网络&#xff0c;在准确率小幅度降低的前提下大大减少模型的参数与运算量。相比于VGG16准确率减少0.9%&#xff0c;但模型的参数只…
阅读更多...
Autox.js和Auto.js4.1.1手机编辑器不好用我自己写了一个编辑器

Autox.js和Auto.js4.1.1手机编辑器不好用我自己写了一个编辑器

功能有 撤销 重做 格式化 跳转关键词 下面展示一些 内联代码片。 "ui"; ui.layout( <drawer id"drawer"><vertical><appbar><toolbar id"toolbar"title""h"20"/></appbar><horizontal b…
阅读更多...
Java面向对象（高级）-- 类的成员之四：代码块

Java面向对象（高级）-- 类的成员之四：代码块

文章目录 一、回顾&#xff08;1&#xff09;三条主线&#xff08;2&#xff09;类中可以声明的结构及作用1.结构2.作用 二、代码块&#xff08;1&#xff09;代码块的修饰与分类1. 代码块的修饰2. 代码块的分类3. 举例 &#xff08;2&#xff09; 静态代码块1. 语法格式2. 静态…
阅读更多...
HC-SR501传感器制作一个报警系统

HC-SR501传感器制作一个报警系统

接线图&#xff1a; 引脚连接&#xff1a; 1. 将 PIR 信号引脚连接到 arduino 数字 引脚 13。 2. 将 PIR V 引脚连接 到 arduino 5v 引脚。 3. 将 PIR GND 引脚连接到 arduino GND 引脚。 4. 将arduino数字 引脚12连接 到220欧姆电阻&#xff0c;并将该电阻连接到 LED V …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023