动态属性的响应式问题和行内编辑的问题

动态属性的响应式问题

通过点击给目标添加动态数据,该数据不具备响应式特性
如下图:
在这里插入图片描述

点击编辑,前面的数据框会变成输入框,点取消会消失

// 获取数据
async getList () {const res = await xxxthis.list = res.data.rows// 1. 获取数据后针对每个数据定义标识 使用 $setthis.list.forEach(item => {// 数据响应式问题:数据变化,视图不变// 因为添加的动态数据,不具备响应式特性// item.isEdit = false// this.$set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加属性 添加响应式this.$set(item, 'isEdit', false)})
}// 点击编辑
hancleEditBtn(row) {// 2. 点击行编辑标记状态改变row.isEdit = true // 改变行编辑状态
}
 <el-table-columnprop="name"label="角色"width="200"><!-- 3. 页面渲染--><template v-slot="{row}"><el-input v-if="row.isEdit" v-model="row.backupRow.name" size="mini" /><span v-else>{{ row.name }}</span></template></el-table-column>

行内编辑

因为编辑时,点击取消会滚到之前的状态,所以编辑的时的数据是临时的数据

  1. 获取数据后,给每一条数据添加备份数据
  2. v-model绑定备份的数据
  3. 点击编辑行 更新备份数据
  4. 点击取消,恢复原数据
<template v-slot="{row}"><template v-if="row.isEdit"><el-button size="mini" type="primary" @click="confirmEdit(row)">确定</el-button><el-button size="mini" @click="hideEditer(row)">取消</el-button></template><template v-else><el-button type="text">分配权限</el-button><el-button type="text" @click="handleEditBtn(row)">编辑</el-button><el-popconfirmtitle="确定删除该角色吗?"><el-button slot="reference" type="text" style="margin-left: 10px;">删除</el-button></el-popconfirm></template>
</template>
// 确定修改角色async confirmEdit(row) {if (row.backupRow.name && row.backupRow.description) {const res = await updateRole({ ...row.backupRow, id: row.id })if (!res.success) {this.$message.error(res.message)} else {this.$message.success('修改角色成功')// 退出编辑,浅拷贝,不用再次发请求角色列表数据/*** 将 { ...row.backupRow, isEdit: false } 中的所有属性复制到 row 对象中。* 如果 row 对象已经有与 row.backupRow 或 { isEdit: false } 中相同的属性,* 那么这些属性在 row 中的值会被新的值覆盖*/Object.assign(row, {...row.backupRow,isEdit: false})}} else {this.$message.error('角色名和描述不能为空')}},// hideEditerhideEditer(row) {row.isEdit = falserow.backupRow.name = row.namerow.backupRow.description = row.descriptionrow.backupRow.state = row.state}

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

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

相关文章

【QT+QGIS跨平台编译】074:【libdxfrw跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、libdxfrw介绍二、QGIS下载三、文件分析四、pro文件五、编译实践一、libdxfrw介绍 libdxfrw是一个用于读取和写入DXF(Drawing Exchange Format)文件的开源C++库。DXF是一种由AutoCAD开发的文件格式,用于存储CAD(计算机辅助设计)图形数据,它…

使用 LLMLingua-2 压缩 GPT-4 和 Claude 提示

原文地址&#xff1a;Compress GPT-4 and Claude prompts with LLMLingua-2 2024 年 4 月 1 日 向大型语言模型&#xff08;LLM&#xff09;发送的提示长度越短&#xff0c;推理速度就会越快&#xff0c;成本也会越低。因此&#xff0c;提示压缩已经成为LLM研究的热门领域。 …

ensp华为AC+AP上线配置

AR1配置&#xff1a; <Huawei>system-view # 进入系统视图<Huawei>sysname R1 # 设备重命名[R1]dhcp enable # 开启DHCP功能[R1]interface GigabitEthernet0/0/0 # 进入接口 [R1-GigabitEthernet0/0/0]ip address 192.168.0.1 23 # 配置接口地址 [R1-GigabitE…

SpringBoot配置文件加载的优先级顺序

SpringBoot配置文件加载的优先级顺序 1.按文件类型2.按路径比较3.按命令行参数设置 1.按文件类型 SpringBoot的配置文件可以分为.properties .yml .yaml 在同一路径下&#xff08;比如都在classpath下&#xff09;三者的优先级顺序是.properties> .yml> .yaml 2.按路径…

基于tensorflow和kereas的孪生网络推理图片相似性

一、环境搭建 基础环境&#xff1a;cuda 11.2 python3.8.13 linux ubuntu18.04 pip install tensorflow-gpu2.11.0 验证&#xff1a;# 查看tensorflow版本 import tensorflow as tf tf.__version__ # 是否能够成功启动GPU from tensorflow.python.client import device_lib pr…

MySQL数据库——3、选择数据库

一、选择数据库 在 MySQL 中&#xff0c;要选择&#xff08;或称为切换到&#xff09;一个数据库&#xff0c;可以使用 SQL 命令 USE。 USE database_name; database_name 是你要切换到的数据库的名称。 例如&#xff0c;要切换到名为 my_database 的数据库&#xff0c;可以…

金融数据_PySpark-3.0.3梯度提升树(GBTClassifier)实例

金融数据_PySpark-3.0.3梯度提升树(GBTClassifier)实例 梯度提升树 (Gradient Boosting Tree): 梯度提升树是一种集成学习方法, 可以通过组合多个弱学习器提高模型性能。 对于分类问题, 可以使用梯度提升决策树。 在实际应用中, 你可能需要进行一些特征工程, 确保输入特征的…

mysql 常见数据处理 dml

学习完&#xff0c;mysql正则表达式查询&#xff0c;把常见的数据处理&#xff0c;做一个汇总&#xff0c;便于查看。 数据操纵语言&#xff08;Data Manipulation Language, DML&#xff09;。 1&#xff0c;新增数据&#xff1a; 1&#xff0c;单个插入&#xff1a; insert…

达梦数据库如何开启数据库审计

基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 官方文档 《DM8安全管理》 5 审计 2 开启审计 审计开关必须由具有数据库审计员SYSAUDITOR权限的管理员进行设…

Python学习之-深拷贝和浅拷贝

前言&#xff1a; Python中的拷贝主要分为浅拷贝&#xff08;shallow copy&#xff09;和深拷贝&#xff08;deep copy&#xff09;&#xff0c;它们在处理复杂对象&#xff08;例如包含其他对象的对象&#xff09;时的行为有明显差异。浅拷贝仅复制对象的第一层&#xff0c;而…

测试框架pytest学习与实践

pytest是一个专业的测试框架&#xff0c;可以帮助我们对python项目进行测试&#xff0c;提高测试的效率。 pytest官网手册&#xff1a;pytest: helps you write better programs — pytest documentation 中文手册&#xff1a;Pytest 教程 入门学习 安装pytest pip instal…

jvm基础三——类加载器

类加载器 在Java中&#xff0c;类加载器&#xff08;Class Loader&#xff09;是Java虚拟机&#xff08;JVM&#xff09;的一部分&#xff0c;负责将类文件&#xff08;.class文件&#xff09;加载到JVM中&#xff0c;使得程序能够使用这些类。类加载器在Java中具有重要的作用&…

6 种事件驱动的架构模式

事件驱动架构(Event-Driven Architecture)是一种基于事件和事件处理的软件架构&#xff0c;它的核心思想是将系统的行为和逻辑抽象成一系列事件&#xff0c;这些事件在系统中按照一定的规则和顺序产生和传播&#xff0c;并被相应的处理器处理。事件驱动架构具有高度的灵活性、可…

【数据结构】考研真题攻克与重点知识点剖析 - 第 3 篇:栈、队列和数组

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…

LogicFlow 在HTML中的引入与使用

LogicFlow 在HTML中的引入与使用 LogicFlow的引入与使用&#xff0c;相较于BPMNJS相对容易一些&#xff0c;更加灵活一些&#xff0c;但是扩展代码可能写得更多一些。 示例展示 使用方式 这个的使用方式就简单很多了&#xff0c;利用cdn把js下载下来&#xff0c;引入到HTML文…

c语言之向main函数传递参数

在c语言中&#xff0c;main函数也是可以传递传递参数的&#xff0c;业内向main函数传递参数的格式是 main(int argc,char *argv[]) 向main函数传递参数不是通过代码传递的&#xff0c;一般是通过dos命令传递 举个例子 #include<stdio.h> void main(int argc,char *ar…

PyTorch之计算模型推理时间

一、参考资料 如何测试模型的推理速度 Pytorch 测试模型的推理速度 二、计算PyTorch模型推理时间 1. 计算CPU推理时间 import torch import torchvision import time import tqdm from torchsummary import summarydef calcCPUTime():model torchvision.models.resnet18()…

使用pip install替代conda install将packet下载到anaconda虚拟环境

问题描述 使用conda install 下载 stable_baseline3出现问题 一番搜索下是Anaconda.org缺少源 解决方法 首先使用管理员权限打开 anaconda prompt 然后激活目标环境&#xff1a;conda activate env_name 接着使用&#xff1a;conda env list查看目标env的位置 如D:\anacon…

2023.4.7 机器学习周报

目录 引言 Abstract 文献阅读 1、题目 2、引言 3、过去方案和Motivation 4、Segment Anything模型 5、创新点 6、实验过程 7、实验结果 1、评价绩效 2、检测评价 3、跟踪评价 8、 结论 总结 引言 本周阅读了一篇关于高效的任意分割模型的文献&#xff0c;用于自…

JVM基础:类的生命周期详解

JDK版本&#xff1a;jdk8 IDEA版本&#xff1a;IntelliJ IDEA 2022.1.3 文章目录 一. 生命周期概述二. 加载阶段(Loading)2.1 加载步骤2.2 查看内存中的对象 三. 连接阶段(Linking)3.1 连接之验证3.2 连接之准备3.3 连接阶段之解析 四. 初始化阶段(Initialization)4.1 单个类的…