**这段代码有两个问题：
1\这 change-col-w类加了hover 显示 下面的img, 第一个td 不起作用（更改一次列宽后），第二个至最后，Hover 有效
第一个TD 拖动了更改一次列宽后 Hover就失效了，后面的 TD hover 一直有效
2\ img 是鼠标拖动用的图标, 但拖动 图标 就 拉出一个新网页面来，新网页显示这个图标**
<!-- 列号 ------------------------->
<td v-for="(i, index) in tableJson.cols" :key="index">
// 这个 change-col-w类加了hover 显示 下面的img DOM
<div class="change-col-w" @mousedown.left="changeColWidth($event, index)">
// 这img 是用来鼠标拖动的图标,但拖动 图标 就 拉出一个新网页面来，新网页显示这个图标，
<img src='../../assets/img/changeCOL.svg' class="v-line-svg" />
</div>
</td>
这个图标是随鼠标 列宽 一同移动的.
但一不心 就把这个图标拉出一个新网页出来
补充一下js
// 拖动改变列宽
let initPointX = 0, initPointY = 0, initLine = 0, vLine: HTMLDivElement, initWidth: number, colNumber: number
let moveWidth = 0, moveHeight = 0, colSVG: HTMLImageElement, crrCOL: HTMLTableCellElement
function changeColWidth(event: any, index: number) {
console.log(event)
colNumber = index // 当前列号
const form_table = document.getElementById('form_table') as HTMLTableElement
colSVG = form_table.querySelector('.v-line-svg') as HTMLImageElement // SVG图标
crrCOL = form_table.querySelectorAll('.col-letter')[index] as HTMLTableCellElement // 当前列 TD dom
vLine = form_table.querySelector('.v-line') as HTMLDivElement // 竖线
initLine = crrCOL.offsetLeft + crrCOL.offsetWidth - 0.5 // 竖线出现的位置
initWidth = crrCOL.offsetWidth // 当前列初始宽度
initPointX = event.clientX // x初始位置
initPointY = event.clientY // Y初始位置
vLine.style.visibility = 'visible' // 竖线显示
vLine.style.height = (ref_table.value as HTMLTableElement).offsetHeight + 'px'
vLine.style.left = initLine + 'px'
document.addEventListener("mousemove", colWidthMousemove) //监听鼠标移动事件
document.addEventListener("mouseup", colWidthMouseup) //监听鼠标抬起事件
}
function colWidthMousemove(event: any) {
updateCellRange(sDOM, eDOM) // 更新选择框的大小
moveWidth = event.clientX - initPointX // 移动的距离
moveHeight = event.clientY - initPointY
vLine.style.left = initLine + moveWidth + 'px'
colSVG.style.top = 8 + moveHeight + 'px' // 上下位置随鼠标称动变化
console.log('鼠标水平移动的距离', moveWidth)
if ((initWidth + moveWidth) < 20) {
tableJson.value.cols[colNumber] = 20
} else {
tableJson.value.cols[colNumber] = initWidth + moveWidth
}
}
// 扡动列宽图标div
.change-col-w {
position: absolute;
background-color: green;
width: 8px;
height: 24px;
top: 0px;
right: -3px;
z-index: 1;
// pointer-events: none;
}
.v-line-svg {
position: absolute;
display: none;
width: 20px;
top: 0;
left: 0;
z-index: 1;
user-select: none;
-webkit-user-drag: none;
// background-image: url('../../assets/img/changeCOL.svg');
}
}
.change-col-w:hover>.v-line-svg {
display: block;
left: -4px;
top: 8px;
-webkit-user-drag: none;
}
