Element-UITable組件上如何添加列拖拽效果-創(chuàng)新互聯(lián)

上面的 data 是列表數(shù)據(jù)集合，option 是 Table 組件配置項(xiàng)，header 是表頭數(shù)據(jù)集合，由父組件傳入

props: {
 data: {
  default: function () {
  return []
  },
  type: Array
 },
 header: {
  default: function () {
  return []
  },
  type: Array
 },
 option: {
  default: function () {
  return {}
  },
  type: Object
 }
 }

配置項(xiàng)可以根據(jù) Element-UI 的 api 自行刪減

但有幾個(gè)參數(shù)在組件內(nèi)部被征用：

1. header-cell-class-name

綁定了一個(gè)函數(shù)，動(dòng)態(tài)給表頭單元格添加 class，從而實(shí)現(xiàn)拖動(dòng)中的虛線效果。

2. column-key

綁定為 header 數(shù)組的 index，用于確定需要修改的 header 元素下標(biāo)

3. render-header

表頭渲染函數(shù)，用以添加自定義方法，以監(jiān)聽 mousemove 等相關(guān)事件 

二、記錄拖動(dòng)狀態(tài)

拖動(dòng)過程中需要記錄幾個(gè)關(guān)鍵參數(shù)：

data () {
 return {
  tableHeader: this.header,
  dragState: {
  start: -1, // 起始元素的 index
  end: -1, // 結(jié)束元素的 index
  move: -1, // 移動(dòng)鼠標(biāo)時(shí)所覆蓋的元素 index
  dragging: false, // 是否正在拖動(dòng)
  direction: undefined // 拖動(dòng)方向
  }
 }
 }

另外父元素傳入了一個(gè)表頭數(shù)據(jù) header，但拖動(dòng)完成后會(huì)修改這個(gè)數(shù)據(jù)

在子組件中直接修改父元素的數(shù)據(jù)是不推薦的，所以這里初始化了一個(gè) tableHeader 用于托管表頭數(shù)據(jù) header

但為了讓 header 修改時(shí)，tableHeader 也能響應(yīng)修改，就得添加一個(gè)監(jiān)視器 watch

 watch: {
 header (val, oldVal) {
  this.tableHeader = val
 }
 }

三、自定義表頭

Element-UI 的 Table 組件為了實(shí)現(xiàn)【拖拽邊框以修改列寬】的功能，沒有將 mousemove、mouseup、mousedown 這三個(gè)事件暴露出來

所以需要自定義表頭，并手動(dòng)添加鼠標(biāo)事件的處理函數(shù)，這就需要用到 renderHeader() 方法

renderHeader (createElement, {column}) {
  return createElement(
  'div', {
   'class': ['thead-cell'],
   on: {
   mousedown: ($event) => { this.handleMouseDown($event, column) },
   mouseup: ($event) => { this.handleMouseUp($event, column) },
   mousemove: ($event) => { this.handleMouseMove($event, column) }
   }
  }, [
   // 添加  用于顯示表頭 label
   createElement('a', column.label),
   // 添加一個(gè)空標(biāo)簽用于顯示拖動(dòng)動(dòng)畫
   createElement('span', {
   'class': ['virtual']
   })
  ])
 },

三個(gè)鼠標(biāo)事件中，第一個(gè)參數(shù)是事件對(duì)象，第二個(gè)是表頭對(duì)象

在對(duì)應(yīng)的處理函數(shù)中，可以通過 column.columnKey 獲取到對(duì)應(yīng)的表頭元素下標(biāo) index

空標(biāo)簽 用來顯示拖動(dòng)時(shí)的動(dòng)畫（虛線）

四、事件處理

按下鼠標(biāo)時(shí)，記錄下起始列。鼠標(biāo)抬起時(shí)，記錄下結(jié)束列。根據(jù)二者之差計(jì)算出拖動(dòng)的方向。

然后根據(jù)起始列和結(jié)束列的位置，將表頭數(shù)據(jù)重新排序，從而實(shí)現(xiàn)列的拖動(dòng)

拖動(dòng)過程的處理函數(shù)如下：

// 按下鼠標(biāo)開始拖動(dòng)
handleMouseDown (e, column) {
 this.dragState.dragging = true
 this.dragState.start = parseInt(column.columnKey)
 // 給拖動(dòng)時(shí)的虛擬容器添加寬高
 let table = document.getElementsByClassName('w-table')[0]
 let virtual = document.getElementsByClassName('virtual')
 for (let item of virtual) {
 item.style.height = table.clientHeight - 1 + 'px'
 item.style.width = item.parentElement.parentElement.clientWidth + 'px'
 }
},

// 鼠標(biāo)放開結(jié)束拖動(dòng)
handleMouseUp (e, column) {
 this.dragState.end = parseInt(column.columnKey) // 記錄起始列
 this.dragColumn(this.dragState)
 // 初始化拖動(dòng)狀態(tài)
 this.dragState = {
 start: -1,
 end: -1,
 move: -1,
 dragging: false,
 direction: undefined
 }
},

// 拖動(dòng)中
handleMouseMove (e, column) {
 if (this.dragState.dragging) {
 let index = parseInt(column.columnKey) // 記錄起始列
 if (index - this.dragState.start !== 0) {
  this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // 判斷拖動(dòng)方向
  this.dragState.move = parseInt(column.columnKey)
 } else {
  this.dragState.direction = undefined
 }
 } else {
 return false
 }
},

// 拖動(dòng)易位
dragColumn ({start, end, direction}) {
 let tempData = []
 let left = direction === 'left'
 let min = left ? end : start - 1
 let max = left ? start + 1 : end
 for (let i = 0; i < this.tableHeader.length; i++) {
 if (i === end) {
  tempData.push(this.tableHeader[start])
 } else if (i > min && i < max) {
  tempData.push(this.tableHeader[ left ? i - 1 : i + 1 ])
 } else {
  tempData.push(this.tableHeader[i])
 }
 }
 this.tableHeader = tempData
},

五、虛線效果

在拖動(dòng)過程中，通過 mousemove 事件，改變當(dāng)前列的表頭狀態(tài)

然后借助 headerCellClassName 動(dòng)態(tài)修改其 class

headerCellClassName ({column, columnIndex}) {
 return (columnIndex - 1 === this.dragState.move ? `darg_active_${this.dragState.direction}` : '')
}

這個(gè) class 會(huì)添加到表頭單元格 上，通過這個(gè) class 給上面的空標(biāo)簽 添加虛線即可

貼一下我自己寫的完整樣式（使用了 sass 作為編譯工具）：

.w-table {
 .el-table th {
 padding: 0;
 .virtual{
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  margin-left: -10px;
  z-index: 99;
  background: none;
  border: none;
 }
 &.darg_active_left {
  .virtual {
  border-left: 2px dotted #666;
  }
 }
 &.darg_active_right {
  .virtual {
  border-right: 2px dotted #666;
  }
 }
 }
 .thead-cell {
 padding: 0;
 display: inline-flex;
 flex-direction: column;
 align-items: left;
 cursor: pointer;
 overflow: initial;
 &:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
 }
 }
 &.w-table_moving {
 .el-table th .thead-cell{
  cursor: move !important;
 }
 .el-table__fixed {
  cursor: not-allowed;
 }
 }
}

六、父組件調(diào)用

關(guān)于“Element-UI Table組件上如何添加列拖拽效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。