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

 研究到这个的目的来源是 想用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); // 输出每个子元素
    });
  });

 

原文地址：https://blog.csdn.net/oMangGuoBuDing1/article/details/140625302

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！