iview实现鼠标拖拽改变列宽

在网上找了好多资料都说iview不能实现鼠标拖拽改变宽度，终于找到一份资料，试了一下可以实现拖拽改变列宽功能，但是仍有缺陷，这里稍作改进，希望对大家有用

---

以下内容基于view2.X，iview4.0版本开始已经自带拖拽改变列宽功能

---

一、相比原文改进如下内容

1. 鼠标拖动时，移动到表头以外的区域时无法触发onmouseup事件
2. 动态控制列的显示和隐藏后，部分列无法拖拽的问题

二、仍存在的问题

1. 因为我是将隐藏/显示列和拖动改变列宽同时使用，目前仍存在一个问题，就是改变显示的列之后，最后的一列无法拖拽改变列宽，如果你不需要隐藏/显示列，则可以忽略

三、全部代码如下

1、引入的dragtable.js文件，代码如下：

export const dragTable = (vm, dom, allDom) => {
  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
    allDom.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) {
        // 注意 fcsbColumns  要与你自己定义的Columns 名字相同！！！
          tTD.fcsbColumns[i - 1].width = parseInt(tTD.fcsbColumns[i - 1].width) + moveDistance
          tTD.oldX = event.x
          table[i].style.cursor = 'col-resize'
        } else {
          tTD.fcsbColumns[i].width = parseInt(tTD.fcsbColumns[i].width) - Math.abs(moveDistance)
          tTD.oldX = event.x
          table[i].style.cursor = 'col-resize'
        }
        // 调整该列中的每个Cell,如果存在小于55的，改成55
        for (let j = 0; j < tTD.fcsbColumns.length; j++) {
          if (tTD.fcsbColumns[j].width < 55) {
            tTD.fcsbColumns[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");
        // 第三个参数  this.$refs.panel 是我的Model，主要用来在第三个参数的范围内监听鼠标抬起事件，可以根据需要传参
        dragTable(this, dom, this.$refs.panel)
      }, 300)

4、效果

拖拽前：

拖拽后：