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>

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

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

相关文章

C++语言基础光速入门笔记

目录 从C到CC和C语言的关系C编译器C面向对象程序设计标准库ANSI 标准C的使用场景标准化 安装 GNU 的 C/C 编译器g 应用说明g 常用命令选项 C 基本语法C 关键字三字符组 C 数据类型基本的内置类型typedef 声明枚举类型类型转换静态转换&#xff08;Static Cast&#xff09;动态转…

沃通国密根证书入根红莲花浏览器,共建国密HTTPS应用生态

近日&#xff0c;沃通CA与海泰方圆红莲花安全浏览器进一步达成合作&#xff0c;沃通新增国密根证书入根红莲花安全浏览器。此次入根合作&#xff0c;标志着沃通国密数字证书产品兼容性再次得到提升&#xff0c;进一步夯实国密应用根基。 沃通CA入根红莲花浏览器&#xff0c;自动…

手机端如何访问本地vue+vite项目,实现实时调试?

一、应用场景 h5&#xff08;vuevite&#xff09;嵌入app后&#xff0c;出现某种问题时&#xff0c;需要每次发布坏境后&#xff0c;才能才看效果&#xff0c;这种来回很耗时间&#xff0c;本文章在于解决手机端直接访问本地启动应用项目&#xff0c;无需重复发布坏境 二、实…

四川易点慧电商抖音小店未来商业新蓝海

在数字经济的浪潮中&#xff0c;电商行业日新月异&#xff0c;不断涌现出新的商业模式和平台。四川易点慧电商抖音小店作为其中的佼佼者&#xff0c;以其独特的商业模式和广阔的市场前景&#xff0c;正成为越来越多创业者和商家的首选。本文将从多个角度探讨四川易点慧电商抖音…

docker 指定jdk11镜像执行jar

dockerfile :下载jdk11 并将上传的jar 放入jdk11容器/root&#xff0c;改名为app.jar vi dockerfile 。。。。内容见下图 # 构建jdk11镜像 docker build -t demo . # 也可以通过jdk11镜像&#xff08;前提有jdk11镜像&#xff09;外挂载目录方式运行jar docker run --name d…

惠普电脑怎么进入bios?图文教程助你轻松上手!

进入BIOS&#xff08;基本输入/输出系统&#xff09;是在电脑启动时进行硬件初始化和设置的重要步骤之一。对于惠普&#xff08;HP&#xff09;电脑用户来说&#xff0c;了解如何进入BIOS是解决一些硬件和系统问题的关键。本文将介绍惠普电脑怎么进入bios的三种方法&#xff0c…

java学习和项目总结

java&#xff1a; JDK/JRE/JVM三者的关系 JVM&#xff1a;JVM是java进行编译的虚拟机&#xff0c;是Java 能够跨平台运行的核心 。 所有的java程序会首先被编译为.class的类文件&#xff0c;这种类文件可以在虚拟机上执行。也就是说class文件并不直接与机器的操作系统交互&a…

React是什么?

一、React简介 1、React是Facebook开发的一款JS库。 2、React一般被用来作为MVC中的V层&#xff0c;它不依赖其他任何的库&#xff0c;因此开发中&#xff0c;可以与任何其他的库集成使用&#xff0c;包括Jquery、Backbone等。 3、它可以在浏览器端运行&#xff0c;也可以通过…

React项目知识积累(二)

1.document.querySelectorAll() document.querySelectorAll() 是 JavaScript 中的一个内置方法&#xff0c;用于选择多个元素并返回一个 NodeList 对象。 const nodeList document.querySelectorAll(selector); selector&#xff1a;一个字符串&#xff0c;用于指定要选择的…

Day24:Leetcode:235. 二叉搜索树的最近公共祖先 + 701.二叉搜索树中的插入操作 + 450.删除二叉搜索树中的节点

LeetCode&#xff1a;235. 二叉搜索树的最近公共祖先 解决方案&#xff1a; 1.思路 对于当前节点x&#xff0c;如果x比p和q的值都大&#xff0c;说明&#xff0c;p和q在x的右子树里面&#xff0c;那么去x的右子树里面去寻找&#xff1b;对于当前节点x&#xff0c;如果x比p和…

Docker 开启 SSL 验证

最近看 OJ 项目的远程开发阶段&#xff0c;然后踩坑踩了 2 天&#x1f602; Docker 版本&#xff1a;在 CentOS 安装 sudo yum install docker-ce-20.10.9 docker-ce-cli-20.10.9 containerd.io Client: Docker Engine - CommunityVersion: 20.10.9API version: …

ESP-IDF使用Button组件实现按键检测的功能

ESP32使用Button组件实现按键检测的功能 ESP-IDF 组件管理LED 组件简介测试button组件写在最后 ESP-IDF 组件管理 IDF 组件管理器工具用于下载 ESP-IDF CMake 项目的依赖项&#xff0c;该下载在 CMake 运行期间自动完成。IDF 组件管理器可以从自动从组件注册表 或 Git 仓库获取…

vue.js基础组件4--下

1.动态组件 1.定义动态组件 利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件&#xff0c;语法格式如下。 <component is"要渲染的组件"></component>上述语法格式中&#xff0c;<component>标签必须配合i…

Java IO与NIO来Copy文件的四种方法实现以及性能对比

使用Java的IO与NIO来Copy文件的四种方法实现以及性能对比 FileCopyRunner接口&#xff0c;定义了Copy文件的接口&#xff0c;等下在测试类中使用匿名内部类来实现。 package nio.channel;import java.io.File;public interface FileCopyRunner {void copyFile(File source , …

广告投放—常见术语

01 按...计费 英文中文场景CPT按时间计费品牌采买CPM每千人展现成本CPM总消费/曝光量*1000CPC按点击收费竞价CPD按下载收费 CPS 按销售收费佣金&#xff0c;如&#xff1a;销售额1000&#xff0c;CPS3%&#xff0c;广告费30CPA按行为收费&#xff08;行为&#xff1a;下载、注…

【C语言】明析部分C语言内存函数

目录 1.memcpy 2.memmove 3.memset 4.memcmp 以下都是内存函数&#xff0c;作用单位均是字节 1.memcpy memcpy是C/C语言中的一个内存拷贝函数&#xff0c;其原型为&#xff1a; void* memcpy(void* dest, const void* src, size_t n);目标空间&#xff08;字节&#xff09…

C语言习题~day17

1.下面代码关于数组名描述不正确的是&#xff08; &#xff09; int main() {int arr[10] {0};return 0; } A.数组名arr和&arr是一样的 B.sizeof(arr)&#xff0c;arr表示整个数组 C.&arr&#xff0c;arr表示整个数组 D.除了sizeof(arr)和&arr中的数组名&…

三生随记——面试之夜

深夜&#xff0c;林浩独自一人站在一座孤零零的大楼前。这座大楼隐藏在城市的边缘&#xff0c;四周弥漫着浓重的雾气&#xff0c;仿佛吞噬着一切光明。他紧紧握住手中的简历&#xff0c;那是他唯一的希望&#xff0c;也是唯一能与外界联系的东西。 他在网上看到一份诱人的工作广…

【Linux系统化学习】应用层——HTTPS协议

目录 什么是加密、解密 为什么要加密 臭名昭著的”运营商劫持“ 常见的加密方式 对称加密 非对称加密 数据摘要&&数据指纹 两个用途 HTTPS的工作过程探究 方案1——只是用对称加密 方案2——只使用非对称加密 方案3——双方都是用非对称加密 方案4——对称…

#05【面试问题整理】嵌入式软件工程师

前言 本系列博客主要记录有关嵌入式方面的面试重点知识,本系列已经更新的篇目有如下: ​ 1.1进程线程的基本概念 1.2 并发,同步,异步,互斥,阻塞,非阻塞的理解 1.3 孤儿进程、僵尸进程、守护进程的概念 【本篇】5.1 Linux内核相关 6.0 单片机常见面试题 内容如有错误请在…