Element-UI 的 Table 組件很強大，但是我們的需求更強大...
簡單粗暴的來一發(fā)效果圖：
一、數(shù)據(jù)驅(qū)動
傳統(tǒng)的拖動效果，都是基于通過 mousedown、mousemove、mouseup 事件來修改刪減 dom 節(jié)點
但 Vue 是一個數(shù)據(jù)驅(qū)動的前端框架，開發(fā)時應(yīng)盡量避免操作 dom
而且 Element-UI 的 Table 組件封裝得很嚴謹，直接操作 dom 很容易產(chǎn)生不可預(yù)計的 bug
所以我的核心思路就是：通過一個數(shù)組渲染表頭（列），然后修改這個數(shù)組的順序，從而修改列表的列排序
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 是列表數(shù)據(jù)集合，option 是 Table 組件配置項，header 是表頭數(shù)據(jù)集合，由父組件傳入
props: { data: { default: function () { return [] }, type: Array }, header: { default: function () { return [] }, type: Array }, option: { default: function () { return {} }, type: Object } }配置項可以根據(jù) Element-UI 的 api 自行刪減
但有幾個參數(shù)在組件內(nèi)部被征用：
1. header-cell-class-name
綁定了一個函數(shù)，動態(tài)給表頭單元格添加 class，從而實現(xiàn)拖動中的虛線效果。
2. column-key
綁定為 header 數(shù)組的 index，用于確定需要修改的 header 元素下標
3. render-header
表頭渲染函數(shù)，用以添加自定義方法，以監(jiān)聽 mousemove 等相關(guān)事件
二、記錄拖動狀態(tài)
拖動過程中需要記錄幾個關(guān)鍵參數(shù)：
data () { return { tableHeader: this.header, dragState: { start: -1, // 起始元素的 index end: -1, // 結(jié)束元素的 index move: -1, // 移動鼠標時所覆蓋的元素 index dragging: false, // 是否正在拖動 direction: undefined // 拖動方向 } } }另外父元素傳入了一個表頭數(shù)據(jù) header，但拖動完成后會修改這個數(shù)據(jù)
在子組件中直接修改父元素的數(shù)據(jù)是不推薦的，所以這里初始化了一個 tableHeader 用于托管表頭數(shù)據(jù) header
但為了讓 header 修改時，tableHeader 也能響應(yīng)修改，就得添加一個監(jiān)視器 watch
watch: { header (val, oldVal) { this.tableHeader = val } }三、自定義表頭
Element-UI 的 Table 組件為了實現(xiàn)【拖拽邊框以修改列寬】的功能，沒有將 mousemove、mouseup、mousedown 這三個事件暴露出來
所以需要自定義表頭，并手動添加鼠標事件的處理函數(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) } } }, [ // 添加 <a> 用于顯示表頭 label createElement('a', column.label), // 添加一個空標簽用于顯示拖動動畫 createElement('span', { 'class': ['virtual'] }) ]) },三個鼠標事件中，第一個參數(shù)是事件對象，第二個是表頭對象
在對應(yīng)的處理函數(shù)中，可以通過 column.columnKey 獲取到對應(yīng)的表頭元素下標 index
空標簽 <span class="virtual"> 用來顯示拖動時的動畫（虛線）
四、事件處理
按下鼠標時，記錄下起始列。鼠標抬起時，記錄下結(jié)束列。根據(jù)二者之差計算出拖動的方向。
然后根據(jù)起始列和結(jié)束列的位置，將表頭數(shù)據(jù)重新排序，從而實現(xiàn)列的拖動
拖動過程的處理函數(shù)如下：
// 按下鼠標開始拖動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' }},// 鼠標放開結(jié)束拖動handleMouseUp (e, column) { this.dragState.end = parseInt(column.columnKey) // 記錄起始列 this.dragColumn(this.dragState) // 初始化拖動狀態(tài) 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 事件，改變當(dāng)前列的表頭狀態(tài)
然后借助 headerCellClassName 動態(tài)修改其 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; } }}六、父組件調(diào)用
<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: '市區(qū)', minWidth: '120' }, { prop: 'address', label: '地區(qū)', minWidth: '150' }, { prop: 'zip', label: '郵編', minWidth: '120' }], tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀區(qū)', address: '上海市普陀區(qū)金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀區(qū)', address: '上海市普陀區(qū)金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀區(qū)', address: '上海市普陀區(qū)金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀區(qū)', address: '上海市普陀區(qū)金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-08', name: '王小虎', province: '上海', city: '普陀區(qū)', address: '上海市普陀區(qū)金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-06', name: '王小虎', province: '上海', city: '普陀區(qū)', address: '上海市普陀區(qū)金沙江路 1518 弄', zip: 200333 }] } }, methods: { handleNameSort () { console.log('handleNameSort') } }, components: { wTable }}</script>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
