vue 表格左右拖拽调整列宽_vue +js 原生实现表格拖拽改变列宽

原生js + html 实现表格拖拽列宽

可直接使用

开发中遇到需求 表格宽度需要随着拖动改变 因为要求特殊性 所以页面没办法使用UI组件提供的 表格组件

只能用原生实现

**好了话不多说上代码** **可以直接使用**

Controlwidth(){

var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题

var table = document.getElementById(“tb_3”);

// console.log(table.rows[0].cells)

for (let j = 0; j < table.rows[0].cells.length; j++) {

table.rows[0].cells[j].onmousedown = function () {

console.log(table.rows[0].cells[j].width)

//记录单元格

tTD = this;

if (event.offsetX > tTD.offsetWidth - 10) {

tTD.mouseDown = true;

tTD.oldX = event.x;

tTD.oldWidth = tTD.offsetWidth;

}

//记录Table宽度

//table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;

//tTD.tableWidth = table.offsetWidth;

}