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

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

动态属性的响应式问题

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

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

// 获取数据
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}

相关文章:

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

动态属性的响应式问题 通过点击给目标添加动态数据&#xff0c;该数据不具备响应式特性 如下图&#xff1a; 点击编辑&#xff0c;前面的数据框会变成输入框&#xff0c;点取消会消失 // 获取数据 async getList () {const res await xxxthis.list res.data.rows// 1. 获…...

微信小程序第六次课(模块化和绑定事件)

模块化 1.首先 我们在utils里面创建一个新的js文件 2.新的js文件里面写我们要实现的函数功能 3.把新的函数功能 通过 module.export.对外公开文件名 新文件名 的方式把之前的函数公开到其他他模块 &#xff08;类似于public 让别的模块可以…...

【Unity添加远程桌面】使用Unity账号远程控制N台电脑

设置地址&#xff1a; URDP终极远程桌面&#xff1b;功能强大&#xff0c;足以让开发人员、设计师、建筑师、工程师等等随时随地完成工作或协助别人https://cloud-desktop.u3dcloud.cn/在网站登录自己的Unity 账号上去 下载安装被控端安装 保持登录 3.代码添加当前主机 "…...

maven的settings.xml、pom.xml配置文件

1、配置文件 maven的配置文件主要有 settings.xml 和pom.xml 两个文件。 其中在maven安装目录下的settings.xml&#xff0c;如&#xff1a;D:\Program Files\apache-maven-3.6.3\conf\settings.xml 是全局配置文件 用户目录的.m2子目录下的settings.xml&#xff0c;如&#…...

使用MQTT.fx接入新版ONENet(24.4.8)

新版ONENet使用MQTT.fx 模拟接入 目录 新版ONENet使用MQTT.fx 模拟接入开始前的准备创建产品设备获取关键参数 计算签名使用MQTT.fx连接服务器数据流准备与上传数据流准备数据发送与接收 开始前的准备 创建产品 设备下载Token签名工具生成签名 创建产品设备 根据以下内容填写…...

Selenium 自动化遇见 shadow-root 元素怎么处理?

shadow-root是前端的特殊元素节点&#xff0c;其使用了一个叫做shadowDOM的技术做了封装&#xff0c;shadowDOM的作用可以理解为在默认的DOM结构中又嵌套了一个DOM结构&#xff08;和iframe有点类似&#xff0c;只不过iframe内嵌的是HTML&#xff09;&#xff0c;我们遇见shado…...

软件系统质量属性_2.面向架构评估的质量属性

为了评价一个软件系统&#xff0c;特别是软件系统的架构&#xff0c;需要进行架构评估。在架构评估过程中&#xff0c;评估人员所关注的是系统的质量属性。评估方法所普遍关注的质量属性有&#xff1a;性能、可靠性、可用性、安全性、可修改性、功能性、可变性、互操作性。 1.…...

设计模式:抽象工厂

定义 抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一个接口&#xff0c;用于创建一系列相关或相互依赖的对象&#xff0c;而无需指定它们具体的类。这种模式特别适用于处理产品族&#xff0c;但在不可能修改的情况下扩展产品族是困难的。 应用场景 抽象工厂模式通…...

【环境搭建】ubuntu工作站搭建全流程(显卡4090)

安装ubuntu22.04系统 首先&#xff0c;先压缩windows分区&#xff0c;按住Win X快捷键&#xff0c;选择磁盘管理,压缩分区&#xff0c;压缩出新的分区用于安装ubuntu22.04 windows插入系统盘&#xff0c;点击重启&#xff0c;一直按F12,选择系统盘启动方式语言选择chinese–…...

蓝桥杯每日一题:有序分数(递归)

给定一个整数 N&#xff0c;请你求出所有分母小于或等于 N&#xff0c;大小在 [0,1] 范围内的最简分数&#xff0c;并按从小到大顺序依次输出。 例如&#xff0c;当 N5 时&#xff0c;所有满足条件的分数按顺序依次为&#xff1a; 0/1,1/5,1/4,1/3,2/5,12/,35,2/3,3/4,4/5,1/…...

SpringBoot学习之Kibana下载安装和启动(Mac版)(三十二)

一、简介 Kibana是一个开源的分析与可视化平台,设计出来用于和Elasticsearch一起使用的。你可以用kibana搜索、查看存放在Elasticsearch中的数据。Kibana与Elasticsearch的交互方式是各种不同的图表、表格、地图等,直观的展示数据,从而达到高级的数据分析与可视化的目的。 …...

Mac下Docker Desktop starting的解决方法

记录下自己在新增了一个新的容器后&#xff0c;Disk Size过大导致启动Docker Desktop会一直卡在Docker Desktop starting&#xff0c;并且重启无效的解决方法。该方法无需重新卸载&#xff0c;并且能保留原有的镜像和容器。 一、确认问题 首先确认Docker.raw大小以确认是否和笔…...

Leetcode面试经典150_Q80删除有序数组中的重复项 II

题目&#xff1a; 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件…...

android 使用ollvm混淆so

使用到的工具 ndk 21.1.6352462&#xff08;android studio上下载的&#xff09;cmake 3.10.2.4988404&#xff08;android studio上下载的&#xff09;llvm-9.0.1llvm-mingw-20230130-msvcrt-x86_64.zipPython 3.11.5 环境配置 添加cmake mingw环境变量如下图: 编译 下载…...

Swift:在 Win10 上编程入门

访问 https://swift.org/download/ 找到 Windows 10&#xff1a;x86_64 下载 swift-5.10-RELEASE-windows10.exe 大约490MB 建议安装在 D:\Swift\ &#xff0c;安装后大约占2.56GB 官网文档&#xff1a;https://www.swift.org/documentation/ 中文教程&#xff1a;The swift…...

Linux多进程通信(4)——消息队列从入门到实战!

Linux多进程通信总结——进程间通信看这一篇足够啦&#xff01; 1.基本介绍 1&#xff09;消息队列的本质其实是一个内核提供的链表&#xff0c;内核基于这个链表&#xff0c;实现了一个数据结构&#xff0c;向消息队列中写数据&#xff0c;实际上是向这个数据结构中插入一个…...

[Flutter]导入singular_flutter_sdk后运行到Android报错

问题&#xff1a; 接入归因之前&#xff0c;flutter项目一起正常。接入归因之后&#xff0c;iOS正常Android有问题。 dependencies: # Singular归因singular_flutter_sdk: ^1.3.3 针对 Flutter 的 Singular SDK 集成指南 https://support.singular.net/hc/zh-cn/articles/…...

ChatGPT新手指南:如何用AI写出专业学术论文

ChatGPT无限次数:点击直达 ChatGPT新手指南&#xff1a;如何用AI写出专业学术论文 在当今信息爆炸的时代&#xff0c;人工智能技术的快速发展为我们提供了许多新的可能性。ChatGPT作为一种先进的自然语言处理技术&#xff0c;不仅能够进行对话和文本生成&#xff0c;还可以辅助…...

【ZZULIOJ】1047: 对数表(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 输入两个正整数m和n&#xff0c;输出m到n之间每个整数的自然对数。 输入 输入包括两个整数m和n(m<n)&#xff0c;之间用一个空格隔开。 输出 每行输出一个整数及其对数&#xff0c;整数占4…...

thinkphp6使用阿里云SDK发送短信

使用composer安装sdk "alibabacloud/dysmsapi-20170525": "2.0.24"封装发送短信类 发送到的短信参数写在env文件里面的 #发送短信配置 [AliyunSms] AccessKeyId "" AccessKeySecret "" signName"" templateCode"&…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...