遍历dom元素下面的子元素的方法,vue中原始标签的ref得到是该元素的dom及下面包含的子dom,与组件ref是引用不同

news2024/11/15 4:56:01

 研究到这个的目的来源是 想用div 遍历方式 替代之前的table tr td 那种框选功能,觉得div灵活,可以随便在外面套层,td与tr之间就不能加div加了布局就乱,然后使用之前的原理(

  const cellList = tableIdR.value.querySelectorAll('td');

  cellList.forEach((cell) => { const initRow = parseInt(cell.getAttribute('initrow'), 10)

),发现这样遍历不好使。然后进一步找ref得到的是啥、dom节点要怎样遍历。

ref放在自定义组件上得到的是组件的引用,
放到原生元素如div 等上面得到的是旗下包含的dom节点

 <div class="squ1"  ref="tableIdR" :id="tableId">
          <el-row class="t1"  v-for="rindex of rowNum" :key="rindex" :id="rindex" :ref="rindex">
              <div v-for="cindex of colNum" :key="cindex" :ref="getCellSeq(rindex,cindex)"
                  :id="getCellSeq(rindex,cindex)"
                  :SampleID="getObjectSampleID(rindex,cindex)"
                  :initRow="rindex"
                  :initCol="cindex"
                 
                  @mousedown="handleMouseDown"
                  @mouseup="handleMouseUp"
                  @contextmenu="openContextMenu($event)"
                  @dblclick = "openEditEnable(rindex,cindex,true)"
                  :style="{width:widthp,height:heightp,fontSize: fontSize}"
                >
              {{ rindex }}{{ cindex }}
              </div>
          </el-row>
      </div>
    </div>



const tableId = 'tableIdR'


// 下面是遍历ref是 ’tableIdR‘的原生dom下的子元素dom,ref放在自定义组件上得到的是组件的引用,
放到原生元素如div 等上面得到的是旗下包含的dom节点,如下面截图
const clearBorderStyles = (tableId) => {
  console.log('vue新方法 tableIdR 打印原生元素的ref内容  ',tableIdR)
  Array.from(tableIdR.children).forEach((child) => {
    console.log('下一级元素: ',child); // 输出每个子元素
    Array.from(child.children).forEach((childSub) => {
      console.log('下二级元素: ',childSub); // 输出每个子元素
    });
  });

 

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

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

相关文章

Caché 数据库摘要与手册索引

因为设置了 VIP 可见,对于无法直接阅读该篇博客的,建议直接阅读官方博客,链接如下: Cach & Ensemble 2018.1.4 – 2018.1.9 | Documentation Home Page (intersystems.com)https://docs.intersystems.com/latest/csp/docbook/DocBook.UI.Page.cls 目录 一、简介 0、…

【Socket 编程】应用层自定义协议与序列化

文章目录 再谈协议序列化和反序列化理解 read、write、recv、send 和 tcp 为什么支持全双工自定义协议网络计算器序列化和反序列化 再谈协议 协议就是约定&#xff0c;协议的内容就是约定好的某种结构化数据。比如&#xff0c;我们要实现一个网络版的计算器&#xff0c;客户端…

掌握互联网路由选择协议:从基础入门到实战

文章目录 路由选择协议的基本概念路由选择算法的分类分层次的路由选择协议路由信息协议&#xff08;RIP&#xff09;内部网关协议&#xff1a;OSPF外部网关协议&#xff1a;BGP互联网中的实际应用总结 互联网的路由选择协议是网络通信的核心&#xff0c;它决定了数据包如何在网…

Artix7系列FPGA实现SDI视频编解码+图像缩放+多路视频拼接,基于GTP高速接口,提供4套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本博已有的FPGA图像缩放方案本博已有的已有的FPGA视频拼接叠加融合方案本方案的无缩放应用本方案在Xilinx--Kintex系列FPGA上的应用本方案在Xilinx--Zynq系列FPGA上的应用 3、详细设计方案设计原理框图S…

nodejs编译报错 集合

目录 一、使用命令编译typescript时报错&#xff0c;报错文件tsconfig.json 二、npm start运行后报错&#xff0c;could not find module 一、使用命令编译typescript时报错&#xff0c;报错文件tsconfig.json npx tsc 报错&#xff1a; Specified include paths were [&…

Layer2区块链扩容方案(1)——总述

写在前面 这篇文章作为一个简单介绍&#xff0c;很多技术只是大致提及或者引用&#xff0c;之后会在详细学习后逐项解释。 补充知识 在了解扩容方案之前&#xff0c;我们最好了解一些相关的知识概念 EVM “EVM” 是“Ethereum Virtual Machine”&#xff08;以太坊虚拟机&…

SSRF学习笔记

1.NAT学习 Nat&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;是 一种网络通信技术主要用于将私有网络中的内部IP地址转换成公共网络中的公共IP地址&#xff0c;以实现局域网内部设备访问互联网的功能。具体来说&#xff0c;Nat有以下几个主要…

【Emacs有什么优点,用Emacs写程序真的比IDE更方便吗?】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

分析性能提升40%,阿里云Hologres流量场景最佳实践

在互联网和移动分析时代&#xff0c;流量数据成为了企业洞察用户行为、优化产品决策和提升运营效率的关键资源。流量数据主要来源于用户在使用APP、小程序或访问网站等媒介平台时产生的各种操作行为&#xff0c;如点击、浏览、注册、下单等。这些行为数据通过数据埋点技术被采集…

Python爬虫技术 第10节 requests库

requests 是 Python 中非常流行的 HTTP 库&#xff0c;它使得发送 HTTP/1.1 请求变得简单直观。下面我会通过几个实际案例来详细介绍如何使用 requests 库。 1. 发送 GET 请求 最简单的请求类型就是 GET 请求&#xff0c;通常用于获取网页或其他资源。 import requests# 发送…

大语言模型-RetroMAE-检索预训练模型

一、背景信息&#xff1a; RetroMAE是2022年10月由北邮和华为提出的一种密集检索预训练策略。 RetroMAE主要应用于检索模型的预训练&#xff0c;模型架构为非对称的Encoder-Decode结构。 二、整体结构&#xff1a; RetroMAE的模型架构为非对称的Encoder-Decode结构。 Encod…

ArcGIS Desktop使用入门(四)——ArcMap软件彻底卸载删除干净

系列文章目录 ArcGIS Desktop使用入门&#xff08;一&#xff09;软件初认识 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——标准工具 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——编辑器 ArcGIS Desktop使用入门&#xff08;二&#x…

【逆向工程】十六进制编辑器与反编译的手写PE文件格式(详细教程)

原理 (1)程序如何在本地生成注册码 1.打开文件并写入MZ头部&#xff1a;打开一个二进制文件以进行写入操作。写入MZ头部&#xff0c;即前64字节&#xff0c;通常以字节序列 4D 5A 开始。 2.写入PE头部&#xff1a;PE头部紧随在MZ头部之后&#xff0c;其位置由MZ头部中的偏移…

构建稳固与安全的网络环境:从微软蓝屏事件看软件更新流程与应急响应

“微软蓝屏”事件暴露了网络安全哪些问题&#xff1f; 近日&#xff0c;由微软视窗系统软件更新引发的全球性“微软蓝屏”事件&#xff0c;不仅让科技领域为之震动&#xff0c;更是一次对全球IT基础设施韧性与安全性的深刻检验。这次事件源于美国电脑安全技术公司“众击”的一…

GIT新手提交操作

1、创建一个本地分支 进入Xshell已经拉取的该项目的项目代码路径下执行git checkout -b 姓名全拼音&#xff0c;例如&#xff1a;git checkout -b xiewei&#xff0c;当前显示已创建。 cuihengyidell-PowerEdge-T550:~/SVN/Git_R11/R11_V4.02.0_Source$ git checkout -b cuih…

数据库之PHP联动

目录 一、软件安装 二、软件讲解 三、搭配环境 四、编辑软件配置 五、成果展示 如果有人问&#xff1a;为什么非要用xampp、VS code编辑软件?不用phpstudy等其他工具。 那么我只想说&#xff1a;因为xampp、VS code编辑软件免费(ಡωಡ)hiahiahia 一、软件安装 下载连…

S-HTTP协议:确保网络通信安全的重要基石

随着互联网技术的飞速发展&#xff0c;网络通信安全已成为一个不可忽视的重要议题。在众多保障网络通信安全的协议中&#xff0c;S-HTTP&#xff08;Secure Hypertext Transfer Protocol&#xff09;以其独特的加密和认证机制&#xff0c;成为保护数据传输安全的重要工具。本文…

SpringBoot 数据访问操作

目录 一.SpringBoot整合Mybatis与Mybatis-Plus 二.SpringBoot切换druid数据源 3.1DRUID配置参数 3.2Druid监控平台 一.SpringBoot整合Mybatis与Mybatis-Plus 步骤&#xff1a; 1.坐标 <dependency><groupId>com.baomidou</groupId><artifactId>myb…

实现自动化采购:食堂采购系统源码开发详解

本篇文章&#xff0c;笔者将详细介绍食堂采购系统的开发过程&#xff0c;从需求分析、系统设计到实现和测试&#xff0c;为您全面解析如何构建一个高效的自动化采购系统。 一、需求分析 1.采购计划管理 2.供应商管理 3.订单管理 4.库存管理 5.财务管理 6.数据分析与报告 …

Power App学习笔记以及基础项目管理demo

Power App学习笔记以及基础项目管理demo 最近学习了一点Power App&#xff0c;感觉挺有意思。配置式组件开发。浅浅记录一下自己实现的项目管理系统&#xff08;即Excel数据的增删改查&#xff09;关于函数的一点皮毛认识。 效果图 筛选数据 编辑 详情 数据源 PowerApp 网…