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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 详解VUE 对element-ui中的ElTableColumn扩展
- vue element-ui table表格滚动加载方法
- vue2.0 + element UI 中 el-table 数据导出Excel的方法
- Element-ui table中过滤条件变更表格内容的方法
- Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
- VUE element-ui 写个复用Table组件的示例代码
- 详解vue2.0的Element UI的表格table列时间戳格式化
