解决办法就是 替换代码中的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') 传统获取方式