使用Element-UI Table實現拖曳功能-js教程-PHP中文網

首頁

web前端

js教程

使用Element-UI Table實現拖曳功能

php中世界最好的语言

Jun 08, 2018 am 11:17 AM

elementtableui拖曳

這次帶給大家使用Element-UI Table實現拖曳功能，使用Element-UI Table實現拖曳功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

Element-UI 的Table 元件很強大，但是我們的需求更強大...

簡單粗暴的來一發效果圖：

一、資料驅動

傳統的拖曳效果，都是基於透過mousedown、mousemove、mouseup 事件來修改刪減dom 節點

但Vue 是資料驅動的前端框架，開發時應盡量避免操作dom

而且Element-UI 的Table 元件封裝得很嚴謹，直接操作dom 很容易產生不可預期的bug

所以我的核心想法就是：透過一個陣列渲染表頭（列），然後修改這個陣列的順序，從而修改列表的列排序

template 部分：

 <p>
 <el-table>
  <slot></slot>
  <el-table-column>
  </el-table-column>
 </el-table>
 </p>

上面的data 是清單資料集合，option 是Table 元件配置項，header 是表頭資料集合，由父元件傳入

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

配置項目可以根據Element-UI 的api 自行刪減

但有幾個參數在元件內部被徵用：

1. header-cell-class-name

綁定了一個函數，動態為表頭單元格新增class，從而實現拖曳中的虛線效果。

2. column-key

綁定為header 陣列的index，用於確定需要修改的header 元素下標

3. render-header

表頭渲染函數，使用以新增自訂方法，以監聽mousemove 等相關事件

二、記錄拖曳狀態

拖曳過程中需要記錄幾個關鍵參數：

data () {
 return {
  tableHeader: this.header,
  dragState: {
  start: -1, // 起始元素的 index
  end: -1, // 结束元素的 index
  move: -1, // 移动鼠标时所覆盖的元素 index
  dragging: false, // 是否正在拖动
  direction: undefined // 拖动方向
  }
 }
 }

另外父元素傳入了一個表頭資料header，但拖曳完成後會修改這個資料

在子元件中直接修改父元素的資料是不建議的，所以這裡初始化了一個tableHeader 用來託管表頭資料header

但為了讓header 修改時，tableHeader 也能回應修改，就得新增一個監視器watch

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

三、自訂表頭

#Element-UI 的Table 元件為了實作【拖曳邊框以修改列寬】的功能，沒有將mousemove、mouseup、mousedown 這三個事件暴露出來

所以需要自訂表頭，並手動新增滑鼠事件的處理函數，這就需要用到renderHeader() 方法

renderHeader (createElement, {column}) {
  return createElement(
  'p', {
   'class': ['thead-cell'],
   on: {
   mousedown: ($event) => { this.handleMouseDown($event, column) },
   mouseup: ($event) => { this.handleMouseUp($event, column) },
   mousemove: ($event) => { this.handleMouseMove($event, column) }
   }
  }, [
   // 添加 <a> 用于显示表头 label
   createElement('a', column.label),
   // 添加一个空标签用于显示拖动动画
   createElement('span', {
   'class': ['virtual']
   })
  ])
 },</a>

三個滑鼠事件中，第一個參數是事件對象，第二個是表頭物件

在對應的處理函數中，可以透過 column.columnKey 取得到對應的表頭元素下標index

空標籤用來顯示拖曳時的動畫（虛線）

四、事件處理

按下滑鼠時，記錄下起始列。滑鼠抬起時，記錄下結束列。根據二者之差計算出拖曳的方向。

然後根據起始列和結束列的位置，將表頭資料重新排序，從而實現列的拖曳

拖曳過程的處理函數如下：

// 按下鼠标开始拖动
handleMouseDown (e, column) {
 this.dragState.dragging = true
 this.dragState.start = parseInt(column.columnKey)
 // 给拖动时的虚拟容器添加宽高
 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'
 }
},

// 鼠标放开结束拖动
handleMouseUp (e, column) {
 this.dragState.end = parseInt(column.columnKey) // 记录起始列
 this.dragColumn(this.dragState)
 // 初始化拖动状态
 this.dragState = {
 start: -1,
 end: -1,
 move: -1,
 dragging: false,
 direction: undefined
 }
},

// 拖动中
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  min && i <p style="text-align: left;"><strong>五、虛線效果</strong></p><p style="text-align: left;">在拖曳過程中，透過mousemove 事件，改變目前列的表頭狀態</p><p style="text-align: left;">然後借助<span style="color: #3366ff"><strong>headerCellClassName </strong></span>動態修改其class</p><pre class="brush:php;toolbar:false">headerCellClassName ({column, columnIndex}) {
 return (columnIndex - 1 === this.dragState.move ? `darg_active_${this.dragState.direction}` : '')
}

這個class 會加入到表頭儲存格

上，透過這個class 給上面的空標籤加虛線即可

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

<style>
.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;
 }
 }
}</style>

#六、父元件呼叫

<template>
<p>
 <wtable>
 <el-table-column>
 </el-table-column>
 </wtable>
</p>
</template>

<script>
import wTable from &#39;@/components/w-table.vue&#39;
export default {
 name: &#39;Table&#39;,
 data () {
 return {
  tableOption: {
  border: true,
  maxHeight: 500
  },
  tableHeader: [{
  prop: &#39;name&#39;,
  label: &#39;姓名&#39;,
  sortable: true,
  sortMethod: this.handleNameSort
  }, {
  prop: &#39;province&#39;,
  label: &#39;省份&#39;,
  minWidth: &#39;120&#39;
  }, {
  prop: &#39;city&#39;,
  label: &#39;市区&#39;,
  minWidth: &#39;120&#39;
  }, {
  prop: &#39;address&#39;,
  label: &#39;地区&#39;,
  minWidth: &#39;150&#39;
  }, {
  prop: &#39;zip&#39;,
  label: &#39;邮编&#39;,
  minWidth: &#39;120&#39;
  }],

  tableData: [{
  date: &#39;2016-05-03&#39;,
  name: &#39;王小虎&#39;,
  province: &#39;上海&#39;,
  city: &#39;普陀区&#39;,
  address: &#39;上海市普陀区金沙江路 1518 弄&#39;,
  zip: 200333
  }, {
  date: &#39;2016-05-02&#39;,
  name: &#39;王小虎&#39;,
  province: &#39;上海&#39;,
  city: &#39;普陀区&#39;,
  address: &#39;上海市普陀区金沙江路 1518 弄&#39;,
  zip: 200333
  }, {
  date: &#39;2016-05-04&#39;,
  name: &#39;王小虎&#39;,
  province: &#39;上海&#39;,
  city: &#39;普陀区&#39;,
  address: &#39;上海市普陀区金沙江路 1518 弄&#39;,
  zip: 200333
  }, {
  date: &#39;2016-05-01&#39;,
  name: &#39;王小虎&#39;,
  province: &#39;上海&#39;,
  city: &#39;普陀区&#39;,
  address: &#39;上海市普陀区金沙江路 1518 弄&#39;,
  zip: 200333
  }, {
  date: &#39;2016-05-08&#39;,
  name: &#39;王小虎&#39;,
  province: &#39;上海&#39;,
  city: &#39;普陀区&#39;,
  address: &#39;上海市普陀区金沙江路 1518 弄&#39;,
  zip: 200333
  }, {
  date: &#39;2016-05-06&#39;,
  name: &#39;王小虎&#39;,
  province: &#39;上海&#39;,
  city: &#39;普陀区&#39;,
  address: &#39;上海市普陀区金沙江路 1518 弄&#39;,
  zip: 200333
  }]
 }
 },
 methods: {
 handleNameSort () {
  console.log(&#39;handleNameSort&#39;)
 }
 },
 components: {
 wTable
 }
}
</script>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

progressbar元件實戰案例解析

如何最佳化Vue專案

以上是使用Element-UI Table實現拖曳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。