vue 两个相同组件操作，相互影响，操作一个影响另一个（使用js原生dom操作导致document.getElementById(tableId).querySelectorAll(‘td‘)）

解决办法就是 替换代码中的js原生操作，因为使用原生dom操作document.getElementById(tableId).querySelectorAll('td') 它不受vue管理也没有虚拟节点操作啥的，也实现不了组件的作用域隔离功能。具体修改改变代码如下(改完瞬间就好了，每个组件都变成独立的个体了)：

 const rowList = tableIdR.value.querySelectorAll('tr');
   console.log('vue新方法 rowList ',rowList)

  // const rowList = document.getElementById(tableId).querySelectorAll('tr')
  // console.log('原方法 rowList ',rowList)

  <table
    border="1"
    ref="tableIdR" //我称之为 vue id
    :id="tableId" // 传统原生dom id
    align="center"
    cellpadding="10"
    cellspacing="0"
  >
  <tr  v-for="rindex of rowNum" :key="rindex" :id="rindex" :ref="rindex" style="height: 30px;" >
      <td
        :ref="getCellSeq(rindex,cindex)"
        :id="getCellSeq(rindex,cindex)"
        :oid="getObject(rindex,cindex).oid"
        :initRow="rindex"
        :initCol="cindex"
        :type = "getObject(rindex,cindex).type"
        :col="JSON.stringify(getObject(rindex,cindex))"
        :myData="col"
        @mousedown="handleMouseDown"
        @mouseup="handleMouseUp"
        @contextmenu="openContextMenu($event)"
        v-for="cindex of colNum" :key="cindex"
        :style="{width:widthp,height:heightp,backgroundColor:getObject(rindex,cindex).bcolor}"
        class="cell"
      >
        {{getCellSeq(rindex,cindex) }} {{getObject(rindex,cindex) }} rindex：{{rindex  }}cindex：{{ cindex }} 
      </td>
    </tr>

const tableId = 'tableIdR'
const tableIdR = ref(null);


const clearBorderStyles = (tableId) => {
   const rowList = tableIdR.value.querySelectorAll('tr');
   console.log('vue新方法 rowList ',rowList)

  // const rowList = document.getElementById(tableId).querySelectorAll('tr')
  // console.log('原方法 rowList ',rowList)





// 获取范围并且将改变边框颜色
const applyBorderStyles = (tableId, startRow, startCol, endRow, endCol) => {
  clearBorderStyles(tableId)
  const cellList = tableIdR.value.querySelectorAll('td');//新的通过vue管理的节点信息获取方式
 // const cellList = document.getElementById(tableId).querySelectorAll('td') 传统获取方式