当前位置: 首页 > 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开发一个工厂库存管理系统,以满足工厂日常库存管理的需求。 二、系统需求…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...