lodash-es 基本使用

中文文档:https://www.lodashjs.com/

cloneDeep方法文档:https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue

在这里插入图片描述

参考掘金文章:https://juejin.cn/post/7354940462061715497
在这里插入图片描述

在这里插入图片描述

安装:

pnpm install lodash-es

npm地址:https://www.npmjs.com/package/lodash-es

github地址:https://github.com/lodash/lodash

在antd组件库中的使用示例:

<template><a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button><a-table bordered :data-source="dataSource" :columns="columns"><template #bodyCell="{ column, text, record }"><template v-if="column.dataIndex === 'name'"><div class="editable-cell"><div v-if="editableData[record.key]" class="editable-cell-input-wrapper"><a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" /><check-outlined class="editable-cell-icon-check" @click="save(record.key)" /></div><div v-else class="editable-cell-text-wrapper">{{ text || ' ' }}<edit-outlined class="editable-cell-icon" @click="edit(record.key)" /></div></div></template><template v-else-if="column.dataIndex === 'operation'"><a-popconfirmv-if="dataSource.length"title="Sure to delete?"@confirm="onDelete(record.key)"><a>Delete</a></a-popconfirm></template></template></a-table>
</template>
<script setup>
import { computed, reactive, ref } from 'vue';
import {CheckOutlined, EditOutlined} from "@ant-design/icons-vue";
import { cloneDeep } from 'lodash-es';const columns = [{title: 'name',dataIndex: 'name',width: '30%',},{title: 'age',dataIndex: 'age',},{title: 'address',dataIndex: 'address',},{title: 'operation',dataIndex: 'operation',},
];
const dataSource = ref([{key: '0',name: 'Edward King 0',age: 32,address: 'London, Park Lane no. 0',},{key: '1',name: 'Edward King 1',age: 32,address: 'London, Park Lane no. 1',},
]);
const count = computed(() => dataSource.value.length + 1);
const editableData = reactive({});
const edit = key => {editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = key => {Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);delete editableData[key];
};
const onDelete = key => {dataSource.value = dataSource.value.filter(item => item.key !== key);
};
const handleAdd = () => {const newData = {key: `${count.value}`,name: `Edward King ${count.value}`,age: 32,address: `London, Park Lane no. ${count.value}`,};dataSource.value.push(newData);
};
</script>
<style lang="less" scoped>
.editable-cell {position: relative;.editable-cell-input-wrapper,.editable-cell-text-wrapper {padding-right: 24px;}.editable-cell-text-wrapper {padding: 5px 24px 5px 5px;}.editable-cell-icon,.editable-cell-icon-check {position: absolute;right: 0;width: 20px;cursor: pointer;}.editable-cell-icon {margin-top: 4px;display: none;}.editable-cell-icon-check {line-height: 28px;}.editable-cell-icon:hover,.editable-cell-icon-check:hover {color: #108ee9;}.editable-add-btn {margin-bottom: 8px;}
}
.editable-cell:hover .editable-cell-icon {display: inline-block;
}
</style>

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

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

相关文章

Javase-异常

文章目录 1. 异常概述2. 异常的继承结构3. 自定义异常4. 异常的处理5. 异常的使用6. finally语句块7. 方法覆盖与异常 1. 异常概述 什么是异常 ①什么是异常?有什么用? 1.Java中的异常是指程序运行时出现了错误或异常情况&#xff0c;导致程序无法继续正常执行的现象。例如&…

谷粒商城 - 树形菜单递归流查询、三级分类数据查询性能优化、Jmter 性能压测

目录 树形分类菜单&#xff08;递归查询&#xff0c;强扩展&#xff09; 1&#xff09;需求 2&#xff09;数据库表设计 3&#xff09;实现 4&#xff09;关于 asSequence 优化 性能压测 1&#xff09;Jmeter 安装使用说明 2&#xff09;中间件对性能的影响 三级分类数…

【Kubernetes】Pod 资源调度之亲和性调度

Pod 资源调度之亲和性调度 1.Node 亲和性调度1.1 Node 硬亲和性1.2 Node 软亲和性 2.Pod 亲和性调度2.1 Pod 硬亲和2.2 Pod 软亲和2.3 Pod 反亲和 Kubernetes 的 默认调度器 以 预选、优选、选定机制 完成将每个新的 Pod 资源绑定至为其选出的目标节点上&#xff0c;不过&#…

吴恩达深度学习笔记:机器学习策略(2)(ML Strategy (2)) 2.7-2.8

目录 第三门课 结构化机器学习项目&#xff08;Structuring Machine Learning Projects&#xff09;第二周&#xff1a;机器学习策略&#xff08;2&#xff09;(ML Strategy (2))2.7 迁移学习&#xff08;Transfer learning&#xff09; 第三门课 结构化机器学习项目&#xff0…

学习笔记——动态路由——IS-IS中间系统到中间系统(区域划分)

三、IS-IS区域划分 根据IS-IS路由器邻居关系&#xff0c;可以将IS-IS划分为两个区域——骨干区域和非骨干区域。&#xff08;注意&#xff0c;这里的区域不是上文中提到的Area ID&#xff09;由L2的IS-IS邻居构成的区域为骨干区域&#xff0c;由L1的IS-IS邻居构成的区域为非骨…

智能运维场景探索 | 运营分析

【本场景来源于 擎创科技《一体化数智运维AIOps解决方案》白皮书&#xff0c;经过重新编写】 该场景主要围绕生产运行、运营决策两个维度进行展开&#xff0c;通过对配置、性能、业务等运行数据的加工计算&#xff0c;形成可量化运营效果、可衡量发展方向的运营数据。整体以低…

如何在Spring Boot中使用gRPC

如何在Spring Boot中使用gRPC 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot应用中集成和使用gRPC&#xff0c;这是一种高性能…

基于Qt实现的PDF阅读、编辑工具

记录一下实现pdf工具功能 语言&#xff1a;c、qt IDE&#xff1a;vs2017 环境&#xff1a;win10 一、功能演示&#xff1a; 二、功能介绍&#xff1a; 1.基于saribbon主体界面框架&#xff0c;该框架主要是为了实现类似word导航项 2.加载PDF放大缩小以及预览功能 3.pdf页面跳转…

android调用openssl库

android 调用openssl库 一、openssl安装编译 下载openssl-1.1.1w.tar.gz和android-ndk-r21e-linux-x86_64.zip解压android-ndk-r21e-linux-x86_64.zip到/opt/pj_ssl目录下&#xff0c;然后配置环境 vim ~/.bashrc增加如下内容 export NDK_HOME/opt/pj_ssl/android-ndk-r21e…

Python基础小知识问答系列-高效遍历多个不同类型元素的迭代器

1. 问题&#xff1a; 当需要对多个迭代器进行相同遍历操作时&#xff0c;如何避免因为迭代器之间的类型或者迭代器元素 数量过大引发的问题&#xff1f; 2. 解决方法&#xff1a; 使用itertools模块中的chain函数。 示例&#xff1a; from itertools import chainlist_a [2,…

MySQL SQL查询执行顺序解析

目录 MySQL SQL查询执行顺序解析一、MySQL SQL查询的基本概念和特点SQL的特点 二、MySQL SQL查询的执行顺序查询语句的顺序参数的执行顺序实际案例 三、查询执行过程中的关键步骤和组件索引查询缓存查询执行 四、如何优化MySQL SQL查询性能1. 使用合适的索引2. 优化查询语句3. …

matlab 抛物线图像绘制

抛物线图像绘制 x^2y4绘制结果 x^2y4 clc,clear,close all; length10; % 创建一个范围内的 x 和 y 值 x linspace(-length, length, 1000); y linspace(-length, length, 1000);% 创建一个网格来表示 x 和 y 值的组合 [X, Y] meshgrid(x, y);% 计算方程的左边和右边的值 LH…

【ARMv8/v9 GIC 系列 5.5 -- IRQ 和 FIQ中断路由的详细介绍】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 Interrupt assignment to IRQ and FIQ signalsGroup 0物理中断Group 1物理中断不同状态下的中断信号汇总当EL3使用AArch64状态时当EL3使用AArch32状态时只支持单一安全状态的系统小结Interrupt assignment to IRQ and FIQ signals …

网络协议 | MQTT协议草案5.0中文版

MQTT协议草案5.0中文版 by hui6075 最新版本: v0.0.1 2018-05-18 (部分3.3.1版本内容翻译引用 mcxiaoke) 文档地址 中文翻译项目 概述 MQTT是一个客户端-服务端架构的发布/订阅模式的消息传输协议。它的设计思想是轻巧、开放、简单、规范&#xff0c;易于实现。这些特点使…

QWidget成员函数功能和使用详细说明(四)(文字+用例+代码+效果图)

文章目录 1.测试工程配置2.成员函数2.1 void setParent(QWidget *parent)2.2 void setMouseTracking(bool enable)2.3 bool hasMouseTracking() const2.4 void setPalette(const QPalette &)2.5 const QPalette &palette() const2.6 int QWidget::grabShortcut(const Q…

Centos7离线安装mysql-5.7.44bundle包

在 CentOS 7 上安装 mysql-5.7.44-1.el7.x86_64.rpm-bundle.tar&#xff08;这里假设这是一个包含多个 RPM 包的 tar 归档文件&#xff09;的步骤通常涉及解压归档文件、安装 RPM 包以及配置 MySQL 服务。以下是一个详细的步骤指南&#xff1a; 1. 下载和解压 RPM 包 首先&am…

实战干货,企业在数字化转型中如何通过最佳实践落地BI报表?

引言&#xff1a;上一篇文章我们提到&#xff1a;通过9大步骤&#xff0c;帮助企业在数字化转型中搭建数据分析的报表体系&#xff01;在实际中的落地过程&#xff0c;通过实施服务的哪些最佳实践可以确保落地效果&#xff0c;达到项目预期目标&#xff0c;给客户带来实质价值&…

香蕉云编+uniapp打包ios的开发包和生产包

登录香蕉云编&#xff0c;找到 云编-ios证书生成&#xff0c;新建CSR文件&#xff0c;并下载csr文件。 登录苹果开发者中心&#xff0c;进入证书页面。 1.创建一个证书&#xff0c;选择ios Distribution类型即可&#xff0c;这是个通用的证书&#xff0c;既能用来打正式包又能…

UML-概述

统一建模语言 是一种专门为面向对象系统的产品进行说明、可视化和编制文档的一种标准语言。UML是面向对象设计的建模工具。它是一种图形化、图标式的一种语言。 软件开发声明周期 做需求–> 形成需求文档 --> 系统设计&#xff08;写代码之前的准备工作&#xff09;–&g…

PyQt5动态热力图清空画布关闭ColorBar

PyQt5生成正弦波动态热力图清空画布关闭ColorBar 1、简介 生成随机正弦波,使用pyqtgraph展示出来,并且使用热力图展示不同频率的正弦波,使用不同的画布颜色显示热力图的变化。 使用python3.8 导入库: pip install matplotlib==3.7.5 pip install numpy==1.24.4 pip in…