iview实现鼠标拖拽改变列宽

**

iview实现鼠标拖拽改变列宽

**
一、相比原文改进如下内容
鼠标拖动时，移动到表头以外的区域时无法触发onmouseup事件
动态控制列的显示和隐藏后，部分列无法拖拽的问题
二、仍存在的问题
因为我是将隐藏/显示列和拖动改变列宽同时使用，目前仍存在一个问题，就是改变显示的列之后，最后的一列无法拖拽改变列宽，如果你不需要隐藏/显示列，则可以忽略
三、代码如下
1、引入的dragtable.js文件，代码如下：

export const dragTable = (vm, dom) => {
    let tTD // 用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
    let table = dom
    for (let i = 0; i < table.length + 1; i++) {
        table[i].onmousedown = () => {
            // 记录down的位置坐标
            tTD = vm
                // 显示拖拽指针的范围0~5，可调整
            if (event.offsetX >= 0 && event.offsetX <= 5) {
                tTD.mouseDown = true
                tTD.oldX = event.x
            }
        }

        // up
        table[i].onmouseup = () => {
            // 结束宽度调整
            if (tTD === undefined) {
                tTD = vm
            }
            tTD.mouseDown = false
            table[i].style.cursor = 'default'
        }

        // move
        table[i].onmousemove = () => {
            // 更改鼠标样式，i=0的单元格不做拖拽操作
            if (event.offsetX >= 0 && event.offsetX <= 5 && i !== 0) {
                table[i].style.cursor = 'col-resize'
            } else {
                table[i].style.cursor = 'default'
            }
            // 取出暂存的Table Cell
            if (tTD === undefined) {
                tTD = vm
            }
            // 调整宽度
            if (tTD.mouseDown != null && tTD.mouseDown === true) {
                table[i].style.cursor = 'default'
                let moveDistance = event.x - tTD.oldX

                // 要处理i=0时的情况
                if (moveDistance >= 0 && i >= 1) {
                    // 注意 columns  要与你自己定义的Columns 名字相同！！！
                    tTD.columns[i - 1].width = parseInt(tTD.columns[i - 1].width) + moveDistance
                    tTD.oldX = event.x
                    table[i].style.cursor = 'col-resize'
                } else {
                    tTD.columns[i].width = parseInt(tTD.columns[i].width) - Math.abs(moveDistance)
                    tTD.oldX = event.x
                    table[i].style.cursor = 'col-resize'
                }
                // 调整该列中的每个Cell,如果存在小于55的，改成55
                for (let j = 0; j < tTD.columns.length; j++) {
                    if (tTD.columns[j].width < 55) {
                        tTD.columns[j].width = 55
                    }
                }
            }
        }
    }
}

2、在需要的页面引入dragtable.js文件

 import { dragTable } from '@/components/你自己的路径/dragtable'

3、页面渲染完后调用

mounted () {
      // 拖拽调整列宽，设置延时执行，避免动态隐藏/显示列后无法拖拽的问题（这里没有方隐藏/显示列）的代码
      // 修改隐藏/显示后需要再调用一次
      setTimeout(() => {
      // 这里的dom为你的table的‘th‘，
        let dom = this.$refs.table.$refs.header.getElementsByTagName("th");
        dragTable(this, dom）
      }, 300)