【contenteditable属性将元素改为可编辑状态】

news2024/11/18 22:41:46

元素添加contenteditable属性之后点击即可进入编辑状态
在这里插入图片描述
像这种只修改一条属性不必再打开弹框进行编辑,使用contenteditable会很方便

添加失焦、回车、获焦事件

 <p :contenteditable="item.contenteditable || false"
 			 @keydown.enter="key($event)"
			 @focus="focus(scope.row.id, item.prop, $event)"
    		 @blur="blur(scope.row.id, item.prop, $event)"
	>{{scope.row[item.prop]}}</p>

$event.target.innerText可以获取到元素的值 结合id...等即可满足部分需求

灰常好用
不过我使用的时候有一个bug
更改之后调用getlist—重新获取表格数据
的时候,被contenteditable所更改的属性值会固定、
在这里插入图片描述
我排序的时候数据排序属性值并未更新,切换页码才会更新
在getlist用各种刷新、重赋值都没用
,重置在赋值没用。深拷贝也没用,$forceUpdate也没用
最后在getlist之前,修改排序属性之后让表格数据为空
才解决这个bug
总结 挺好用

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

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

相关文章

HarmonyOS/OpenHarmony-ArkTS基于API9元服务开发快速入门

一、创建项目 二、创建卡片 三、添加资源 四、具体代码 Entry Component struct WidgetNewCard {/** The title.*/readonly TITLE: string harmonyOs;readonly CONTEXT: string 技术构建万物智联;/** The action type.*/readonly ACTION_TYPE: string router;/** The…

fastadmin列表页 修改 正序排列 倒序排列 desc asc

打开控制器对应的 js文件 &#xff0c;文件目录为 public/assets/js/backend/xxx.js

接口自动化报告,生成本地服务并自动打开时失败

错误原因&#xff1a; 端口号被占用 首先可以在cmd中调出命令窗口然后执行命令netstat -ano就可以查看所有活动的链接&#xff0c;找到被占用的端口号 1、通过命令taskkill /f /t /im "进程名称" &#xff0c;根据进程的名称杀掉所有的进程。或者taskkill /f /t /p…

《码上行动:零基础学会Python编程》书籍分享

Python是一种高级的、面向对象的编程语言&#xff0c;由Guido van Rossum于1991年开发。它具有简洁、易读和可维护的语法&#xff0c;被广泛用于科学计算、Web开发、数据分析、人工智能等领域。 以下是Python的一些特点和优势&#xff1a; 简洁易读&#xff1a;Python采用简洁…

svn工具使用

svn 介绍 解决之道&#xff1a; SCM&#xff1a;软件配置管理 所谓的软件配置管理实际就是对软件源代码进行控制与管理 CVS&#xff1a;元老级产品 VSS&#xff1a;入门级产品 ClearCase&#xff1a;IBM 公司提供技术支持 SVN&#xff1a;主流产品 什么是SVN&#xff…

ATFX汇市:惠誉下调美债评级,白宫债务无序扩张下,美元国际信用受损

环球汇市行情摘要—— 昨日&#xff0c;美元指数上涨0.06%&#xff0c;收盘在101.94点&#xff0c; 欧元贬值0.12%&#xff0c;收盘价1.0984点&#xff1b; 日元贬值0.75%&#xff0c;收盘价143.33点&#xff1b; 英镑贬值0.46%&#xff0c;收盘价1.2776点&#xff1b; 瑞…

【WiFi】Wi-Fi HaLow技术

目录 1.10大Wi-Fi物联网芯片 2.面向物联网的无线通信技术对比 3.Wi-Fi HaLow值得期待 4.选择IoT Wi-Fi芯片和模块时需要考虑哪些因素&#xff1f; 5.Wi-Fi 6 IoT芯片 5.1.乐鑫科技ESP32-C6 5.2.高通Immersive Home 318平台 6.WiFi BLE IoT芯片 6.1.博流智能 BL602/BL…

SQL-事务

set autocommit 0; select * from acount where name 嘉宝 && acount.money > 1000; update acount set money money - 1000 where name 嘉宝; update acount set money money 1000 where name 煎包; commit ; 脏读;当有两个事务使用同一数据库时&#xff0c…

使用 github 同步谷歌浏览器书签

想必使用谷歌浏览器Chrome的用户一定非常头疼的一件事就是&#xff1a;账户不能登录&#xff0c;书签收藏夹不能同步&#xff0c;换一台电脑书签收藏夹没有了&#xff01; 下面教大家一招亲测有效适用的方法解决书签同步问题&#xff0c;在任何电脑都可以同步了 1、去下载谷歌…

Delphi 中High DPI开发注意事项

目录 前言&#xff1a; 什么是High DPI? 一、表现不一致的现象 二、当前的解决方案 三、重点 前言&#xff1a; 什么是High DPI? High DPI&#xff08;高分辨率显示&#xff09;是指显示设备具有高像素密度的特征。它意味着在相同的显示区域内&#xff0c;显示设备能够…

第7章 动态创建标记

一些传统方法 document.write document对象的write()方法可以方便快捷地把字符串(支持html元素)插入到文档里。 document.write("<h1>hello world</h1>")document.write的最大缺点是它违背了“行为应该与表现分离”的原则。JavaScript和HTML代码混杂在…

eNSP interface g0/0/0 报错解决办法

文章目录 1 报错截图2 解决办法2.1 排查设备是否有 GM 接口2.2 更换适合的路由器&#xff0c;并验证 1 报错截图 2 解决办法 2.1 排查设备是否有 GM 接口 查看下设备是否支持 GM 接口&#xff08;GigabitEthernet&#xff09; 方式一&#xff1a;右键路由器设备 - 设置 - 查看…

【C++】类和对象-继承

0.前言 1.基本语法 继承的用处就是极大的减少代码的重复性&#xff0c;如果没有用继承&#xff0c;看看以下代码&#xff0c;你知道了。。。。 基本实现代码&#xff1a; #include <iostream> using namespace std; /******************************************/void …

8.5周六|Move Dev Meetup厦门站不见不散

Move Dev Meetup是由MoveFuns DAO发起的线下研讨会&#xff0c;旨在为参与的开发者提供深入了解Move语言机会。截至目前为止&#xff0c;Meetup已在成都、深圳、杭州等多个城市举办。Move Dev Meetup厦门站将在8月5日&#xff08;本周六&#xff09;举办&#xff0c;Sui将作为支…

观察级水下机器人使用系列之五三维激光扫描仪

本文主要讲观察级水下机器人Valor配套的三维激光扫描仪&#xff0c;它是近年来ROV的主力光学设备。三维激光扫描仪是Voyis&#xff08;原公司为2G Robotics&#xff09;公司生产的&#xff0c;型号为ULS-500 Micro。 ​编辑​ ULS-500 Micro的技术参数如下图。ULS-500 Pro扫描…

关于docker的一些深入了解

本文将深入介绍一下docker方面的知识&#xff0c;不尽完全&#xff0c;慢慢完善。 进程 进程的概念 在介绍docker的相关知识前&#xff0c;先了解一下相关概念。进程就是系统中正在运行的程序&#xff0c;进程是操作系统的概念&#xff0c;每当我们执行一个程序时&#xff0…

关于 Ubuntu 长按 shift 无效, 按 Esc 直接进入 grub 改密码的解决方法

本次长按shift没有反应&#xff0c;直接进入了系统界面&#xff0c;所以改用长按Esc键&#xff0c;步骤如下&#xff1a; 1. 长按esc&#xff0c;进入grub>提示 2.输入grub>normal &#xff0c;回车 3.上一步回车后&#xff0c;继续敲击Esc &#xff0c;出现grub界面 …

rdp、ftp协议的密码爆破

远程桌面 rdp协议 3389 文件传输 FTP协议 20 21 攻击方&#xff1a;Kali 测试方&#xff1a;Win7 两台都要在同一网段 密码爆破工具 hydra九头蛇 hydra&#xff08;九头蛇&#xff09;是著名黑客组织thc的一款开源的暴力破解密码工具&#xff0c;功能非常强大&#xff0c;ka…

Emacs之远程开发C++配置: emacs + tramp + clangd(一百二十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

大数据学习教程:Linux高级教程(下)

四、大数据集群服务器搭建 1. 新增Linux服务器 1.1、克隆虚拟机 学习环境中&#xff0c;一般使用VMware虚拟机克隆Linux系统&#xff0c;用来进行集群服务器的搭建。 VMware支持两种类型的克隆&#xff1a;完整克隆、链接克隆 完整克隆是和原始虚拟机完全独立的一个复制&…