这篇文章将为大家详细讲解有关Element-UI Table组件上如何添加列拖拽效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联是一家集网站建设,阜平企业网站建设,阜平品牌网站建设,网站定制,阜平网站建设报价,网络营销,网络优化,阜平网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
Element-UI 的 Table 组件很强大,但是我们的需求更强大...
简单粗暴的来一发效果图:

一、数据驱动
传统的拖动效果,都是基于通过 mousedown、mousemove、mouseup事件来修改删减 dom 节点
但 Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom
而且 Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug
所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列表的列排序
template 部分:
上面的 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) }
}
}, [
// 添加 用于显示表头 label
createElement('a', column.label),
// 添加一个空标签用于显示拖动动画
createElement('span', {
'class': ['virtual']
})
])
},三个鼠标事件中,第一个参数是事件对象,第二个是表头对象
在对应的处理函数中,可以通过 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 < 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 会添加到表头单元格
贴一下我自己写的完整样式(使用了 sass 作为编译工具):