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;
    };
    table.rows[0].cells[j].onmouseup = function () {
        //结束宽度调整
        if (tTD === undefined) tTD = this;
        tTD.mouseDown = false;
        tTD.style.cursor = 'default';
    };
    table.rows[0].cells[j].onmousemove = function () {
        //更改鼠标样式
        if (event.offsetX > this.offsetWidth - 10)
            this.style.cursor = 'col-resize';
        else
            this.style.cursor = 'default';
        //取出暂存的Table Cell
        if (tTD === undefined) tTD = this;
        //调整宽度
        if (tTD.mouseDown != null && tTD.mouseDown === true) {
            tTD.style.cursor = 'default';
            if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
            //调整列宽
            tTD.style.width = tTD.width;
            tTD.style.cursor = 'col-resize';
            //调整该列中的每个Cell
            table = tTD;
            //  console.log(tTD.width)
            while (table.tagName !== 'TABLE') table = table.parentElement;
                      //  console.log()
                  table.rows[0].cells[j].style.width = tTD.width + "px"
                  // border = "1px solid #000"
                  // console.log(table.rows[0].cells[j].style.width)
                  // console.log()
            // for (let j = 0; j < table.rows.length; j++) {
            //     //  console.log(tTD.width)
            
            // }
            //调整整个表
            //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
            //table.style.width = table.width;
        }
    };
}

},

2.使用方法 本文以vue 为例 在UPdated 中引用

在 table表格中 注册一个ID 这个id （用法就不说了自己悟）

本文虽是转载但有部分有所改动 再此解释一下

转载文中 改变的是表格中所有列的宽度 而实际项目中多只改变当前的列宽可根据需求而定
本文只作于技术参考
转载地址如下

https://my.oschina.net/dreamHarbour/blog/882660