当前位置: 首页 > news >正文

Anti Desgin Vue 实现 表格可编辑、新增、删除功能

1、效果图
新增:
在这里插入图片描述
在这里插入图片描述
删除:
在这里插入图片描述
在这里插入图片描述
修改:
在这里插入图片描述
代码:

<template><div><button @click="add">添加</button><span style="margin-left: 8px"><template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template></span><a-table:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }":columns="columns":data-source="data"bordered><template v-for="col in ['name','barcode','price','num','amount','type','standard']" :slot="col" slot-scope="text, record"><div :key="col"><a-inputv-if="record.editable"style="margin: -5px 0":value="text"@change="e => handleChange(e.target.value, record.key, col)"/><template v-else>{{ text }}</template></div></template><template slot="operation" slot-scope="text, record"><div class="editable-row-operations"><span v-if="record.editable"><a @click="() => save(record.key)">保存</a><a-popconfirmtitle="确定取消?"okText="确定"cancelText="取消"@confirm="() => cancel(record.key)"><a>取消</a></a-popconfirm></span><span v-else><a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a><a  @click="() =>deleteItem(record.key)">删除</a></span></div></template></a-table></div>
</template>
<script>
const columns = [{title: "样品名称",dataIndex: "name",// width: "25%",align: 'center',scopedSlots: { customRender: "name" }},{title: '规格型号',dataIndex: 'barcode',align: 'center',scopedSlots: { customRender: "barcode" }},{title: '数量',dataIndex: 'price',align: 'center',scopedSlots: { customRender: "price" }},{title: '生成批号',dataIndex: 'num',align: 'center',scopedSlots: { customRender: "num" }},{title: '生产单位',dataIndex: 'amount',align: 'center',scopedSlots: { customRender: "amount" }},{title: '检验类别',dataIndex: 'type',align: 'center',scopedSlots: { customRender: "type" }},{title: '试验标准',dataIndex: 'standard',align: 'center',scopedSlots: { customRender: "standard" }},{title: "操作",dataIndex: "operation",align: 'center',scopedSlots: { customRender: "operation" }}];let data = [];
// 数组创建时候的下标
var numbe = 0;
export default {data() {this.cacheData = data.map(item => ({ ...item }));return {data,columns,editingKey: "",selectedRowKeys: []};},methods: {add() {data.push({key: numbe.toString(),name: "hah",// 规格型号barcode:'E200',price: "1",num: "1",amount: "xxx公司",type: "1",standard: "国家标准",});numbe++;console.log(data);this.cacheData = data.map(item => ({ ...item }));},handleChange(value, key, column) {const newData = [...this.data];const target = newData.filter(item => key === item.key)[0];if (target) {target[column] = value;this.data = newData;}},edit(key) {const newData = [...this.data];const target = newData.filter(item => key === item.key)[0];this.editingKey = key;if (target) {target.editable = true;this.data = newData;}},deleteItem(key){console.log('删除前',this.data);console.log('cacheData',this.cacheData)console.log('删除',key)const newData = [...this.data];this.data = newData.filter(item=>item.key !== key)this.cacheData = this.cacheData.filter(item=>item.key !== key)data=this.dataconsole.log('删除后',this.data);this.editingKey = "";},save(key) {const newData = [...this.data];console.log('newData',newData)const newCacheData = [...this.cacheData];console.log('newCacheData',newCacheData)const target = newData.filter(item => key === item.key)[0];console.log('target',target)const targetCache = newCacheData.filter(item => key === item.key)[0];console.log('targetCache',targetCache)if (target && targetCache) {delete target.editable;this.data = newData;Object.assign(targetCache, target);this.cacheData = newCacheData;}this.editingKey = "";},cancel(key) {const newData = [...this.data];const target = newData.filter(item => key === item.key)[0];this.editingKey = "";if (target) {Object.assign(target,this.cacheData.filter(item => key === item.key)[0]);delete target.editable;this.data = newData;}},onSelectChange(selectedRowKeys) {console.log("selectedRowKeys changed: ", selectedRowKeys);this.selectedRowKeys = selectedRowKeys;}},computed: {hasSelected() {return this.selectedRowKeys.length > 0;}}
};
</script>
<style scoped>
.editable-row-operations a {margin-right: 8px;
}
</style>

相关文章:

Anti Desgin Vue 实现 表格可编辑、新增、删除功能

1、效果图 新增&#xff1a; 删除&#xff1a; 修改&#xff1a; 代码&#xff1a; <template><div><button click"add">添加</button><span style"margin-left: 8px"><template v-if"hasSelected">{…...

黄金这轮回调会有多深?

华福策略表示&#xff0c;综合来看&#xff0c;22年3月和23年5月两次回调时美联储尚在加息&#xff0c;后续如果美联储降息&#xff0c;将对黄金价格构成显著支撑&#xff0c;因此本次黄金价格的回调幅度应小于前两次回调幅度。 2022年3月以来&#xff0c;黄金共有两次大的回调…...

自定义类型:结构体详解

1.结构体 1.1 结构的基础知识 结构是一些值的集合&#xff0c;这些值称为成员变量。一个整型数组&#xff0c;它的每个数组元素只能是整型&#xff0c;字符型的数组它的每个元素只能是字符型。但是结构体的每个成员可以是各种不同类型的变量。 1.2结构的声明 //声明 struct t…...

嵌入式进阶——舵机控制PWM

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 舵机信号线代码示例初始化PWM初始化UART打印日志初始化外部中断Extimain函数 舵机最早用于船舶上实现转向功能,由于可以通过程序连…...

Java实现抢红包算法——详细注释,标准语法

package learn;import java.math.BigDecimal; import java.util.ArrayList; import java.util.List; import java.util.Random;public class RobRedPacket {// 发红包算法&#xff0c;金额参数以分为单位public static List<Integer> divideRedPacket(Integer totalAmoun…...

【优选算法】位运算 {位运算符及其优先级;位运算的应用:判断位,打开位,关闭位,转置位,位图,get lowbit,close lowbit;相关编程题解析}

一、位运算符及其优先级 我们知道&#xff0c;计算机中的数在内存中都是以二进制形式进行存储的 &#xff0c;而位运算就是直接对整数在内存中的二进制位进行操作&#xff0c;因此其执行效率非常高&#xff0c;在程序中尽量使用位运算进行操作&#xff0c;这会大大提高程序的性…...

服务器数据恢复—服务器正常断电重启后raid信息丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 一台某品牌DL380 G4服务器&#xff0c;服务器通过该服务器品牌smart array控制器挂载了一台国产的磁盘阵列&#xff0c;磁盘阵列中有一组由14块SCSI硬盘组建的RAID5。服务器安装LINUX操作系统&#xff0c;搭建了NFSFTP&#xff0c;作为内部文件…...

如何理解kmp的套娃式算法啊?

概念 KMP算法&#xff0c;全称Knuth Morris Pratt算法 。文章大部分内容出自《数据结构与算法之美》 核心思想 假设主串是a&#xff0c;模式串是b 在模式串与主串匹配的过程中&#xff0c;当遇到不可匹配的字符的时候&#xff0c;对已经对比过的字符&#xff0c;是否能找到…...

python中树的运用样例

目录 一、文件系统样例 二、Trie树 一、文件系统样例 class FileNode:def __init__(self, name, is_fileFalse):self.name nameself.is_file is_fileself.children []def add_child(self, child):self.children.append(child)# 创建文件系统结构 root FileNode("roo…...

C++学习/复习5--构造函数与初始化/static成员/友元/内部类/匿名对象/编译器的拷贝构造优化

一、本章概要 二、再谈构造函数 1.构造体赋初值与初始化 2.初始化列表与初始化 2.1定义 2.2注意事项与举例 3.explicit关键字与构造函数 3.1隐式类型转换 也叫做自动类型转换 这种转换通常是从存储范围小的类型到存储范围大的类型&#xff0c;或者是从低精度的数值类型到高…...

数学建模--LaTeX基本介绍和入门

1.引言 &#xff08;1&#xff09;上次我们介绍到了我们这个团队第一次参加这个数学建模比赛&#xff0c;就是这个电工杯&#xff0c;我是一名论文手&#xff0c;我们在这个下午也是对于这个比赛过程中出现的问题做了相应的分析&#xff0c;每个人也是进行了反思&#xff0c;知…...

【Java面试】二、Redis篇(中)

文章目录 1、Redis持久化1.1 RDB1.2 AOF1.3 RDB与AOF的对比 2、数据过期策略&#xff08;删除策略&#xff09;2.1 惰性删除2.2 定期删除 3、数据淘汰策略4、主从复制4.1 主从全量同步4.2 增量同步 5、哨兵模式5.1 服务状态监控5.2 哨兵选主规则5.3 哨兵模式下&#xff0c;Redi…...

二进制安装Kubernetes(k8s)v1.30.1

二进制安装Kubernetes&#xff08;k8s&#xff09;v1.30.1 https://github.com/cby-chen/Kubernetes 开源不易&#xff0c;帮忙点个star&#xff0c;谢谢了 介绍 kubernetes&#xff08;k8s&#xff09;二进制高可用安装部署&#xff0c;支持IPv4IPv6双栈。 我使用IPV6的目的是…...

俄罗斯半导体领域迈出坚实步伐:首台光刻机诞生,目标直指7纳米工艺

近日&#xff0c;国外媒体纷纷报道&#xff0c;俄罗斯在半导体技术领域取得了重要突破&#xff0c;首台光刻机已经制造完成并正在进行严格的测试阶段。这一里程碑式的事件标志着俄罗斯在自主发展半导体技术的道路上迈出了坚实的一步。 据俄罗斯联邦工业和贸易部副部长瓦西里-什…...

什么是容器:从基础到进阶的全面介绍

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

力扣 第 399 场周赛 解题报告 | 珂学家 | 调和级数 + 分块DP

前言 T1. 优质数对的总数 I 题型: 签到 class Solution:def numberOfPairs(self, nums1: List[int], nums2: List[int], k: int) -> int:res 0for v1 in nums1:for v2 in nums2:if v1 % (v2 * k) 0:res 1return resT2. 压缩字符串 III 思路: 模拟 感觉引入一个栈&…...

Redis的下载、安装、启动和初尝试【超级简单】

redis最好是在Linux系统中使用&#xff0c;这是最接近生产实际的环境。 不过&#xff0c;我们初学者&#xff0c;目的是学习Redis的使用、原理&#xff0c;如果在Linux下直接学习Redis&#xff0c;很可能会因为命令不熟悉而劝退&#xff0c;这是不好的。 因此&#xff0c;我主张…...

v-cloak 用于在 Vue 实例渲染完成之前隐藏绑定的元素

如果你是后端开发者&#xff08;php&#xff09;&#xff0c;在接触一些vue2开发的后台时&#xff0c;会发现有这段代码&#xff1a; # CDN <script src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js"></script> # 或 <script src"https://cd…...

港股:并不意外的获利了结

中金公司表示&#xff0c;风险偏好驱动的反弹已经较为充分&#xff0c;分歧和获利了结也不意外。接下来或在当前水平震荡盘整&#xff0c;等待更多催化剂。 在持续一个月的大涨后&#xff0c;港股市场上周出现明显回调。此前我们多次提示&#xff0c;市场已经超买&#xff0c;情…...

Python项目开发实战:工厂库存管理系统(案例教程)

一、项目背景与意义 随着制造业的快速发展,工厂库存管理成为了企业运营中不可或缺的一部分。一个高效的库存管理系统能够确保物料供应的及时性、降低库存成本、提高生产效率。因此,我们决定使用Python开发一个工厂库存管理系统,以满足工厂日常库存管理的需求。 二、系统需求…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...