誉天程序员-2301-3-day08

4. 书籍管理实现CURD

这个结构比较复杂,是有一套复杂的机制,注意它们之间的关系和控制实现。
 新增和修改怎么复用对话框
 对话框中的数据,表格中展现的数据,临时记录正在操作的数据统一联动起来
 单条删除怎么传递数据,多条删除怎么传递数据
 修改怎么传递当前修改记录的索引值index

4.1. 删除

4.1.1. 增加插槽

Vue给我们提供了一个很好用的功能template插槽,可以自动为我们传递一些对象,如row行对象,这样我们就无需自己去写代码,直接拿过来用即可。
官网地址:
https://element-plus.gitee.io/zh-CN/component/table.html#table-column-插槽
https://element-plus.gitee.io/zh-CN/component/table.html#自定义列模板
插槽传递当前行数据,自动封装到row中,我们直接使用row对象即可:

<el-table-column label="操作" width="200"><template #default="scope"></template>
</el-table-column>

4.1.2. 删除按钮

注意:row代表的是业务数据,所以并不包含index,而插槽额外提供了属性 i n d e x 代表索引值。定义的写法有点与众不同,采用了 e s 6 的语法,前面加个 index代表索引值。定义的写法有点与众不同,采用了es6的语法,前面加个 index代表索引值。定义的写法有点与众不同,采用了es6的语法,前面加个,使用时需要注意。

<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)"><el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>删除
</el-button>

4.1.3. 删除事件

splice从数组中移除元素

//根据槽传过来的row当前行数据,获取其数组的索引位置,调用splic方法进行删除const handleDel = (index, row)=>{//从数组中删除索引起始的位置,删除1条tableData.value.splice(index, 1)}

4.2. 批量删除

4.2.1. 增加选择列

之前我们已经加了多选列,type=”selection”,用其可以记录下用户选中的记录

<el-table-column prop="id" type="selection" width="55" />

4.2.2. 触发的事件

增加选择时触发的selection-change事件

<el-table :data="tableData" border @selection-change="handleSelectionChange">

4.2.3. 选择事件

多选按钮,ElementPlus框架会自动把选中的行存放到muchSelection数组中。

const muchSelection = ref([])	//用于记录多选选中的集合
//表格的多选事件,val保存了被选中的行的
const handleSelectionChange = (val)=>{muchSelection.value = val//console.log(muchSelection.value)
}

4.2.4. 批量删除动态展现

我们还实现了很酷炫的效果,通过v-if判断muchSelection.length数组的长度,实现是否展现批量删除按钮。数组为空就不展现,数组不为空就展现。

<el-button v-if="muchSelection.length" type="danger" size="small" @click="handleDelList">批量删除</el-button>

4.2.5. 循环删除

循环调用删除一条实现。

//批量删除const handleDelList = () => {//遍历拿到每一行,调用单个删除muchSelection.value.forEach(row=>{// indexOf获取当前行数据在数组中的索引值const index = tableData.value.indexOf(row)if(index != -1){handleDel(index, row)}})}

4.3. 转向新增

4.3.1. 新增按钮

<el-button type="primary" size="small" @click="toAdd"><el-icon class="el-icon--left"><CirclePlus /></el-icon>新增
</el-button>

4.3.2. 按钮方法

…(对象展开运算符)form.data,formInit这两个展开的对象属性会合并到 form.data 对象中,如果有相同属性名则会用 formInit 对象的对应属性值覆盖 form.data 对象的属性值。
formInit覆盖了之前旧的数据,但对象的结构未破坏,因为form.data是新对象也和form数据分开。这就解决了先去修改,再进新增时,数据回显错误的问题。
//转向新增

const toAdd = ()=>{form.data = {...form.data,...formInit		//利用init覆盖了现有数据}dialogVisible.value = truedialogType.value = 'add'
}

4.4. form数据

const formInit = {	//初始化值name: '',author: '',publishing: '',printTime: new Date()
}
let form = reactive(formInit)	//对话框表单绑定数据

4.5. 新增

4.5.1. 新增保存

新增修改复用了对话框代码就带来一个副作用,到底当前是新增还是修改呢?那我们再专门设置一个变量来判别。通过这个判别我们就可以修改对话框的标题,到底是新增还是修改了。

const dialogType = ref('add')const dialogSave = (index)=>{if(dialogType.value === 'add'){tableData.push(form.data)}else{tableData[index] = {...tableData[index],...form.data}}dialogVisible.value = false	//关闭对话框
}

4.5.2. 对话框的标题

通过三元表达式进行判别:

  <el-dialog v-model="dialogFormVisible"><template v-slot:title><span style="font-weight: bold;"><el-icon><ElementPlus /></el-icon>{{dialogType.value==='update'?'修改':'新增'}}书籍管理</span></template>

4.6. 修改

4.6.1. 问题

修改较为复杂,会遇到两个问题:
1)因为修改分为两个过程,打开修改的对话框,点击对话框中的确认按钮。index是传递给打开抽屉的方法handleEdit,而抽屉表单确认是方法confirmClick。它们之间断开了,参数就无法传递。而我们在表单确认时,要去知道具体修改的是哪一条,这怎么办呢?
解决办法:加个公用变量curIndex,这样我们在handleEdit时设置,在confirmClick就可以调用了。
2)修改时如果直接使用form.value=row,进行处理。当我们修改表单值时,页面的值也会随之修改。这是响应式对象的缺点,因为它们是一份引用,所以一个变,其它就跟着变。怎么解决呢?
解决方案:利于js提供的Oject.assign将对象内容复制,而不是引用。这样就断开了其中的关系。修改表单时,页面数据就不会同时被修改了。

4.6.2. 修改按钮

传递修改的索引值和当前行数据

<el-button @click="toEdit(scope.$index)" type="success" size="small"><el-icon><EditPen /></el-icon> 修改</el-button>

4.6.3. 按钮事件

let curIndex = ref(-1)
const toEdit = (index)=>{form.data = {		//回显数据...form.data,...tableData[index]}curIndex = index	//保留下来当前的索引值,供修改保存方式使用dialogVisible.value = truedialogType.value = 'edit'
}

4.6.4. 修改保存

const dialogSave = (index)=>{if(dialogType.value === 'add'){tableData.push(form.data)}else{tableData[index] = {...tableData[index],...form.data}}dialogVisible.value = false	//关闭对话框
}	

4.7. 日期格式转化

4.7.1. 问题

日期显示为格林威治时间,不符合中文日常习惯。
//导入日期函数库
import { format } from 'date-fns'
//配置表格列,它会自动回调这个方法,每行数据都回调,vue会传递3个参数给我们
const formatDate = (row, index, cellValue)=>{return format(cellValue, 'yyyy-MM-dd')	//调用函数库方法
}

4.8. 查询

4.8.1. 搜索框

<el-row style="padding:10px;"><div><el-button type="primary" size="small" @click="toAdd"><el-icon><CirclePlus /></el-icon> 新增</el-button><el-button v-if="multipleSelection.length" type="danger" size="small" @click="handlerMuchDel">删除多条</el-button></div><div style="padding-left:10px;"><el-input size="small" v-model="searchBookName" width="100" placeholder="按书名检索"  clearable><template #append><el-icon><Search /></el-icon></template></el-input></div><div style="padding-left:10px;"><el-input size="small" v-model="searchAuthor" placeholder="按作者检索" clearable><template #append><el-icon><Search /></el-icon></template></el-input></div>
</el-row>

4.8.2. 换数据绑定

将tableData换成filteredData:

<el-table :data="filteredData"

4.8.3. 数据过滤

import {ref,computed} from 'vue'const searchBookName = ref('')	//按书名搜索const searchAuthor = ref('')	//按书名搜索import {computed} from 'vue'	//动态计算,搜索框输入内容变化会自动触发let filterData = computed(()=>{return tableData.filter((r)=>{//并列条件return r.name.includes(searchBookName.value) && r.author.includes(searchAuthor.value)//或者条件// return r.name.includes(searchBookName.value) || r.author.includes(searchAuthor.value)})})

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

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

相关文章

AutoDL从0到1搭建stable-diffusion-webui

前言 AI绘画当前非常的火爆&#xff0c;随着Stable diffusion&#xff0c;Midjourney的出现将AI绘画推到顶端&#xff0c;各大行业均受其影响&#xff0c;离我们最近的AI绘画当属Stable diffusion&#xff0c;可本地化部署&#xff0c;只需电脑配备显卡即可完成AI绘画工作&…

驱动开发day8

编写LED灯的驱动&#xff0c;使用GPIO子系统&#xff0c;里面添加按键的中断处理 1.应用程序发送指令控制LED亮灭 2.按键1 按下&#xff0c;led1电位反转 按键2按下&#xff0c;led2电位反转 按键3 按下&#xff0c;led3电位反转 驱动程序 #include <linux/init.h> #i…

java动态绑定机制

规则 调用对象方法时&#xff0c;该方法会和对象的运行类型绑定。调用对象属性时&#xff0c;没有动态绑定机制&#xff0c;哪里声明哪里使用。 例子&#xff1a; class Base{public int a10;public int getA(){return a;}public int getSum(){return 10getA();//这里会调用…

Git常见问题

git clone 提示OpenSSL SSL_read git clone 时提示Connection was reset, errno 10054类错误 fatal: unable to acce ss https://github.com/fex-team/ueditor.git/: OpenSSL SSL_read: Connection was reset, errno 10054 备注&#xff1a;以下方法只是归纳整理&#xff0c;…

使用事件侦听器和 MATLAB GUI 查看 Simulink 信号研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

仓库管理系统有哪些功能,如何对仓库进行有效管理

阅读本文&#xff0c;您可以了解&#xff1a;1、仓库管理系统有哪些功能&#xff1b;2、如何对仓库进行有效管理。 仓库是制造业的开端&#xff0c;原材料的领料开始。企业的仓库管理是涉及企业生产、企业资金流和企业的经营风险的关键环节。在众多的工业企业、制造型企业、贸…

Linux 安装软件 - yum工具

在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, 通过包管理器可以很方便的获取到这个编译好的软件包, 直接进行…

FFmpeg下载安装及Windows开发环境设置

1 FFmpeg简介 FFmpeg&#xff1a;FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。项目的名称来自MPEG视频编码标准&#xff0c;前面的"FF"代表…

mysql函数及用法

目录 一、前言 二、函数 2.1五大聚合函数 2.2 日期函数 3.字符串函数 三. 总结&#xff1a; 一、前言 mySQL 是一种常见的关系型数据库管理系统&#xff0c;提供了大量的函数可以帮助开发者有效地操作和管理数据库。mySQL根据这些函数将数据更好的进行操作&#xff0c;从…

《向量数据库》——怎么安装向量检索库Faiss?

装 Faiss 以下教程将展示如何在 Linux 系统上安装 Faiss: 1. 安装 Conda。 在安装 Faiss 之前,先在系统上安装 Conda。Conda 是一个开源软件包和环境管理系统,可在 Windows、macOS 和 Linux 操作系统上运行。根据以下步骤在 Linux 系统上安装 Conda。 2. 从官网…

Python:Spider爬虫工程化入门到进阶(1)创建Scrapy爬虫项目

Python&#xff1a;Spider爬虫工程化入门到进阶系列: Python&#xff1a;Spider爬虫工程化入门到进阶&#xff08;1&#xff09;创建Scrapy爬虫项目Python&#xff1a;Spider爬虫工程化入门到进阶&#xff08;2&#xff09;使用Spider Admin Pro管理scrapy爬虫项目 本文通过简…

MySQL 重置root 密码

5.7 版本 首先要把服务mysql57 关闭 net stop MySQL57 在安装的mysql57的程序的bin中 运行cmd&#xff08;管理员运行&#xff09; mysqld --defaults-file‘mysql存放数据的位置\my.ini’ --skip-grant-tables 上图 错误 注意&#xff1a;如果遇到mysqld: Can’t change dir…

大数据之Hadoop(一)

目录 一、准备三台服务器 二、虚拟机间配置免密登录 三、安装JDK 四、关闭防火墙 五、关闭安全模块SELinux 六、修改时区和自动时间同步 一、准备三台服务器 我们先准备三台服务器&#xff0c;可以通过虚拟机的方式创建&#xff0c;也可以选择云服务器。 关于如何创建虚…

MySQL最终弹-并发(脏读,不可重复读,幻读及区别),JDBC的使用和安装,最全万字

一、&#x1f49b;并发基本概念 并发的基本意思&#xff1a; 什么是并发呢&#xff1f;简单的理解就是同一时间执行 服务器同一时刻&#xff0c;给多个客户端提供服务&#xff5e;&#xff5e;&#xff0c;这两个客户端都可以给服务器提交事务。 如果提交两个事务&#xff0c;改…

机器学习06 数据准备-(利用 scikit-learn基于Pima Indian数据集作 数据特征选定)

什么是数据特征选定? 数据特征选定&#xff08;Feature Selection&#xff09;是指从原始数据中选择最相关、最有用的特征&#xff0c;用于构建机器学习模型。特征选定是机器学习流程中非常重要的一步&#xff0c;它直接影响模型的性能和泛化能力。通过选择最重要的特征&#…

Linux安装操作(Mac版本)

Parallels Desktop的简介 Parallels Desktop是Mac平台上的虚拟机软件&#xff0c;也是Mac平台最好的虚拟机软件之一。它允许用户在Mac OS X系统上同时运行其他操作系统&#xff0c;例如Windows、Linux等。Parallels Desktop为Mac用户提供了使用其他操作系统和软件的便利性&…

【ASP.NET MVC】使用动软(三)(11)

一、问题 上文中提到&#xff0c;动软提供了数据库的基本操作功能&#xff0c;但是往往需要添加新的功能来解决实际问题&#xff0c;比如GetModel&#xff0c;通过id去查对象&#xff1a; 这个功能就需要进行改进&#xff1a;往往程序中获取的是实体的其他属性&#xff0c;比如…

基于 JavaScript 的富文本编辑器框架简单使用

1.打开wangEditor wangEditor开源 Web 富文本编辑器&#xff0c;开箱即用&#xff0c;配置简单https://www.wangeditor.com/ 2.html文件 <link href"https://unpkg.com/wangeditor/editorlatest/dist/css/style.css" rel"stylesheet"> <style&…

直播预告 | 开源运维工具使用现状以及可持续产品的思考

运维平台自上世纪90年代开始进入中国市场&#xff0c;曾形成以传统四大外企&#xff1a;IBM、BMC、CA、HP为代表的头部厂商&#xff0c;还有一众从网管起家的国内厂商。2010年前后&#xff0c;出现了以Zabbix、Nagios、Cacti为代表的开源工具&#xff0c;后来又陆续出现了Prome…

13-5_Qt 5.9 C++开发指南_基于信号量的线程同步_Semaphore

文章目录 1. 信号量的原理2. 双缓冲区数据采集和读取线程类设计3. QThreadDAQ和QThreadShow 的使用4. 源码4.1 可视化UI设计框架4.2 qmythread.h4.3 qmythread.cpp4.4 dialog.h4.5 dialog.cpp 1. 信号量的原理 信号量(Semaphore)是另一种限制对共享资源进行访问的线程同步机制…