iview實現鼠標拖拽改變列寬

在網上找到一份資料試了下，實現了拖拽改變列寬功能，但是仍有缺陷，這裏稍作改進
原文地址

一、相比原文改進如下內容

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)