Element-UI 的 Table 組件很強大，但是我們的需求更強大...
簡單粗暴的來一發效果圖：
一、數據驅動
傳統的拖動效果，都是基于通過 mousedown、mousemove、mouseup 事件來修改刪減 dom 節點
但 Vue 是一個數據驅動的前端框架，開發時應盡量避免操作 dom
而且 Element-UI 的 Table 組件封裝得很嚴謹，直接操作 dom 很容易產生不可預計的 bug
所以我的核心思路就是：通過一個數組渲染表頭（列），然后修改這個數組的順序，從而修改列表的列排序
template 部分：
<div class="w-table" :class="{'w-table_moving': dragState.dragging}"> <el-table :data="data" :border="option.border" :height="option.height" :max-height="option.maxHeight" :style="{ width: parseInt(option.width)+'px' }" :header-cell-class-name="headerCellClassName" > <slot name="fixed"></slot> <el-table-column v-for="(col, index) in tableHeader" :key="index" :prop="col.prop" :label="col.label" :width="col.width" :min-width="col.minWidth" :type="col.type" :header-align="col.headerAlign" :column-key="index.toString()" :render-header="renderHeader" > </el-table-column> </el-table> </div>上面的 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( 'div', { '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'] }) ]) },三個鼠標事件中，第一個參數是事件對象，第二個是表頭對象
在對應的處理函數中，可以通過 column.columnKey 獲取到對應的表頭元素下標 index
空標簽 <span class="virtual"> 用來顯示拖動時的動畫（虛線）
四、事件處理
按下鼠標時，記錄下起始列。鼠標抬起時，記錄下結束列。根據二者之差計算出拖動的方向。
然后根據起始列和結束列的位置，將表頭數據重新排序，從而實現列的拖動
拖動過程的處理函數如下：
// 按下鼠標開始拖動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 < 0 ? 'left' : 'right' // 判斷拖動方向 this.dragState.move = parseInt(column.columnKey) } else { this.dragState.direction = undefined } } else { return false }},// 拖動易位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},五、虛線效果
在拖動過程中，通過 mousemove 事件，改變當前列的表頭狀態
然后借助 headerCellClassName 動態修改其 class
headerCellClassName ({column, columnIndex}) { return (columnIndex - 1 === this.dragState.move ? `darg_active_${this.dragState.direction}` : '')}這個 class 會添加到表頭單元格 <th> 上，通過這個 class 給上面的空標簽 <span class="virtual"> 添加虛線即可
貼一下我自己寫的完整樣式（使用了 sass 作為編譯工具）：
<style lang="scss">.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; } }}六、父組件調用
<template><div> <wTable :data="tableData" :header="tableHeader" :option="tableOption"> <el-table-column slot="fixed" fixed prop="date" label="日期" width="150"> </el-table-column> </wTable></div></template><script>import wTable from '@/components/w-table.vue'export default { name: 'Table', data () { return { tableOption: { border: true, maxHeight: 500 }, tableHeader: [{ prop: 'name', label: '姓名', sortable: true, sortMethod: this.handleNameSort }, { prop: 'province', label: '省份', minWidth: '120' }, { prop: 'city', label: '市區', minWidth: '120' }, { prop: 'address', label: '地區', minWidth: '150' }, { prop: 'zip', label: '郵編', minWidth: '120' }], tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀區', address: '上海市普陀區金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀區', address: '上海市普陀區金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀區', address: '上海市普陀區金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀區', address: '上海市普陀區金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-08', name: '王小虎', province: '上海', city: '普陀區', address: '上海市普陀區金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-06', name: '王小虎', province: '上海', city: '普陀區', address: '上海市普陀區金沙江路 1518 弄', zip: 200333 }] } }, methods: { handleNameSort () { console.log('handleNameSort') } }, components: { wTable }}</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
