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