Element-UI Table組件上添加列拖拽效果實現(xiàn)方法
Element-UI 的 Table 組件很強大，但是我們的需求更強大...
簡單粗暴的來一發(fā)效果圖：
一、數(shù)據(jù)驅(qū)動
傳統(tǒng)的拖動效果，都是基于通過 mousedown、mousemove、mouseup 事件來修改刪減 dom 節(jié)點
但 Vue 是一個數(shù)據(jù)驅(qū)動的前端框架，開發(fā)時應盡量避免操作 dom
而且 Element-UI 的 Table 組件封裝得很嚴謹，直接操作 dom 很容易產(chǎn)生不可預計的 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 等相關事件
二、記錄拖動狀態(tài)
拖動過程中需要記錄幾個關鍵參數(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 也能響應修改，就得添加一個監(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ù)是事件對象，第二個是表頭對象
在對應的處理函數(shù)中，可以通過 column.columnKey 獲取到對應的表頭元素下標 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 事件，改變當前列的表頭狀態(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue中keyup.enter和blur事件沖突的問題及解決
這篇文章主要介紹了Vue中keyup.enter和blur事件沖突的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue是一款流行的前端框架，它提供了一系列的工具和組件，使得開發(fā)者可以更加便捷地創(chuàng)建交互式的Web應用程序，輪播圖是Web應用程序中常見的一種交互式組件，本文將介紹如何使用Vue和第三方組件庫 Element UI實現(xiàn)輪播圖功能,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3.0運行npm run dev報錯Cannot find module&
本文主要介紹了vue3.0運行npm run dev報錯Cannot find module node:url,因為使用的node版本是14.15.1低于15.0.0導致,具有一定的參考價值,感興趣的可以了解一下2023-10-10
vue監(jiān)聽sessionStorage中值的變化方式
這篇文章主要介紹了vue監(jiān)聽sessionStorage中值的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
作為一個曾經(jīng)的Java?coder,當?shù)谝淮慰吹絡s里面的裝飾器Decorator,就馬上想到了Java中的注解,當然在實際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關于Vue項目之ES6裝飾器在項目實戰(zhàn)中應用的相關資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了詳解vue掛載到dom上會發(fā)生什么，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表滾動的過渡動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
vscode中vue代碼提示與補全沒反應解決(vetur問題)
這篇文章主要給大家介紹了關于vscode中vue代碼提示與補全沒反應解決(vetur問題)的相關資料,文中通過圖文將解決的方法介紹的非常詳細,需要的朋友可以參考下2023-03-03
本文主要介紹了el-menu動態(tài)加載路由的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04