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

动态属性的响应式问题

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

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

// 获取数据
async getList () {
	const res = await xxx
	this.list = res.data.rows
	// 1. 获取数据后针对每个数据定义标识 使用 $set
	this.list.forEach(item => {
		// 数据响应式问题:数据变化,视图不变
		// 因为添加的动态数据,不具备响应式特性
		// item.isEdit = false
		// this.$set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加属性 添加响应式
		this.$set(item, 'isEdit', false)
	})
}

// 点击编辑
hancleEditBtn(row) {
	// 2. 点击行编辑标记状态改变
	row.isEdit = true // 改变行编辑状态
}
 <el-table-column
          prop="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-popconfirm
		title="确定删除该角色吗?"
		>
			<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('角色名和描述不能为空')
      }
    },
    // hideEditer
    hideEditer(row) {
      row.isEdit = false
      row.backupRow.name = row.name
      row.backupRow.description = row.description
      row.backupRow.state = row.state
    }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

跨国网络通信挑战与解决方案:优化越南工厂与中国总部连接的网络质量

在全球化不断深入的今天&#xff0c;越来越多的中国企业走出国门&#xff0c;在世界各地设立分支机构和生产基地。然而&#xff0c;随之而来的是跨国网络通信的挑战。最近&#xff0c;客户位于越南的工厂与中国总部之间的网络连接出现了问题&#xff0c;直接影响了企业的日常运…

Windows启动项管理器Autoruns

文章目录 AutoRunsVirusTotalAutorunsc AutoRuns AutoRuns用于启动程序管理&#xff0c;可显示系统启动或登录时的各种自动启动行为&#xff0c;并扩展和加载各种系统进程&#xff0c;要比任务管理器中的自启动管理高级得多&#xff0c;其界面如下&#xff0c;列出了所有开机启…

阿里云幻兽帕鲁多人联机服务器多少钱?4核16G或8核32G配置

2024阿里云幻兽帕鲁专用服务器价格表&#xff1a;4核16G幻兽帕鲁专用服务器26元一个月、149元半年&#xff0c;默认10M公网带宽&#xff0c;8核32G幻兽帕鲁服务器10M带宽价格90元1个月、271元3个月。阿里云提供的Palworld服务器是ECS经济型e实例&#xff0c;CPU采用Intel Xeon …

c++11 标准模板(STL)本地化库 - 平面类别 - (std::ctype) 定义字符分类表(五)

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 定义字符分类表 std::ctype template< class CharT > clas…

159 Linux C++ 通讯架构实战14,epoll 函数代码实战

ngx_epoll_init函数的调用 //&#xff08;3.2&#xff09;ngx_epoll_init函数的调用&#xff08;要在子进程中执行&#xff09; //四章&#xff0c;四节 project1.cpp&#xff1a;nginx中创建worker子进程&#xff1b; //nginx中创建worker子进程 //官方nginx ,一个…

卫星遥感影像统计农业产量、作物分类及面积

卫星遥感技术的广泛应用为农业领域带来了巨大的变革&#xff0c;其中&#xff0c;卫星遥感影像在农业产量估算方面的应用正成为一项关键技术。通过高分辨率的遥感数据&#xff0c;农业生产者可以更准确、及时地了解农田状况&#xff0c;实现精准农业管理&#xff0c;提高产量和…

零基础如何闯入IT的神秘大门?

前言 随着信息技术的飞速发展&#xff0c;IT行业成为了许多有志之士梦寐以求的职业领域。但对于零基础的人来说&#xff0c;如何成功进入这个行业却是一个不小的挑战。下面&#xff0c;我将结合自身的C语言专业知识&#xff0c;为大家详细阐述一条可行的学习路径&#xff0c;并…

canvas画图,画矩形、圆形、直线可拖拽移动,可拖拽更改尺寸大小

提示&#xff1a;canvas画图&#xff0c;画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖拽移动 文章目录 前言一、画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖拽移动总结 前言 一、画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖…

LLM大语言模型(九):LangChain封装自定义的LLM

背景 想基于ChatGLM3-6B用LangChain做LLM应用&#xff0c;需要先了解下LangChain中对LLM的封装。本文以一个hello world的封装来示例。 LangChain中对LLM的封装 继承关系&#xff1a;BaseLanguageModel——》BaseLLM——》LLM LLM类 简化和LLM的交互 _call抽象方法定义 ab…

教你快速认识Java中的抽象类和接口

目录 引言 抽象类&#xff08;Abstract Class&#xff09; 抽象类的概念 抽象类的图标 抽象类的语法 抽象类的特点 接口&#xff08;Interface&#xff09; 接口的概念 接口的图标 接口的语法 接口的特点 接口的使用 接口的意义 抽象类与接口的区别 Object类 结…

idea开发 java web 高校学籍管理系统bootstrap框架web结构java编程计算机网页

一、源码特点 java 高校学籍管理系统是一套完善的完整信息系统&#xff0c;结合java web开发和bootstrap UI框架完成本系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 前段主要技术 css jq…

最优算法100例之33-数据流的中位数

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 中位数是有序列表中间的数。如果列表长度是偶数,中位数则是中间两个数的平均值。 例如, [2,3,4] 的中位数是 3 [2,3] 的中位…

对PAC的侧信道攻击

PAC存不存在安全性问题&#xff1f;侧信道攻击&#xff1f;本博客探讨这些问题。

达梦DMHS-Manager工具安装部署

目录 1、前言 1.1、平台架构 1.2、平台原理 2、环境准备 2.1、硬件环境 2.2、软件环境 2.3、安装DMHS 2.3.1、源端DMHS前期准备 2.3.2、源端DMHS安装 2.3.3、目的端DMHS安装 3、DMHS-Manager客户端部署 3.1、启动dmhs web服务 3.2、登录web管理平台 4、添加DMHS实…

手搓Docker-Image-Creator(DIC)工具(03):实现alpine+jre的镜像

此篇博客将介绍如何使用 Docker 创建一个alpine3.10-jre1.8.0_401 的 Docker 镜像&#xff0c;并使用 Docker 运行起来。将用到 Dockerfile 的 COPY 命令、RUN 命令、ENV 命令&#xff0c;最终实现基于单一应用的 Dockerfile 构建镜像和运行。 紧急修改&#xff1a;代码我是在m…

python笔记(9)Dictionary(字典)

目录 创建字典 取值 修改字典 删除 内置函数和方法 创建字典 字典键值和value用&#xff1a;隔开&#xff0c;键值是不可变的&#xff0c;而且必须是唯一的&#xff0c;值可以变&#xff0c;可以是任意类型 dict {key1 : value1, key2 : value2 } 1&#xff09;不允许同…

【C语言】“vid”Microsoft Visual Studio安装及应用(检验内存泄露)

文章目录 前言安装包获取配置VLD完成 前言 我们在写代码时往往容易存在内存泄漏的情况&#xff0c;所以存在这样一个名为VLD的工具用来检验内存泄漏&#xff0c;现在我来教大家安装一下 安装包获取 vld下载网址&#xff1a;https://github.com/KindDragon/vld/releases/tag/…

mysql中主键索引和联合索引的原理解析

mysql中主键索引和联合索引的原理解析 一、主键索引二、什么是联合索引? 对应的B树是如何生成的?1、建立索引方式2、什么是最左前缀原则?3、回表4、为什么要遵守最左前缀原则才能利用到索引?5、什么是覆盖索引?6、索引扫描底层原理7、order by为什么会导致索引消失&#x…

vue3和vue2项目中如何根据不同的环境配置基地址?

在不同环境下取出的变量的值是不同的, 像这样的变量称为环境变量 为什么要使用环境变量呢? 开发环境生产环境下的接口地址有可能是不一样的&#xff0c;所以我们需要根据环境去配置不同的接口基地址 1、vue2环境变量配置 在根目录创建&#xff1a;.env.development和.env.p…

RTPS协议概述

一.RTPS协议概述 RTPS协议主要由四个部分组成&#xff1a; 1.发现模块&#xff08;Discovery&#xff09; ​ 发现模块是定义了RTPS的参与者&#xff08;Participant&#xff09;获取其他RTPS的参与者&#xff08;Participant&#xff09;&#xff0c;端点&#xff08;Endpo…