一、项目需求：

需求：表格实现表头拖拽、排序、树形表格展示、下载Excel、下载CSV格式的数据

项目里用到的技术：iview的table+vue

参考文章：https://www.cnblogs.com/wisewrong/p/8820508.html

二、实现方法

Iview4.0版本已经可以实现树形表格展示的功能、下载CSV、排序功能，具体可参考官方文档

下边罗列一下拖拽和下载excel的功能

1、表头拖拽

• 在vue的data里定义变量dragState

[code]dragState: {
start: -9, // 起始元素的 index
end: -9, // 移动鼠标时所覆盖的元素 index
dragging: false, // 是否正在拖动
direction: undefined // 拖动方向
}

• renderHeader重绘表头，主要是绑定事件

[code]       renderHeader: (h, params) => {
return h(
"span",
{
on: {
mousedown: $event => {
this.handleMouseDown($event, params);
},
mousemove: $event => {
this.handleMouseMove($event, params);
}
},
style: {
cursor:"move",
"user-select":"none"
},
},
item.label
);
},

• 具体事件：因为我做的这个表格第一列或者第一二列有复选框，所以不参与拖拽，下方代码-1，-2的代码可自行修改

[code]// --------------------拖拽表头的事件----------------------------
// 按下鼠标开始拖动
handleMouseDown(e, parames) {
let index = this.isTree?parames.index-2:parames.index-1
this.dragState.dragging = true;
this.dragState.start = parseInt(index);
document.addEventListener("mouseup", this.handleMouseUp);
},
// 鼠标放开结束拖动
handleMouseUp() {
this.dragColumn(this.dragState);
// 初始化拖动状态
this.dragState = {
start: -9,
end: -9,
dragging: false,
direction: undefined
};
document.removeEventListener("mouseup", this.handleMouseUp);
},
// 拖动中
handleMouseMove(e, parames) {
if (this.dragState.dragging) {
let index = this.isTree?parseInt(parames.index-2):parseInt(parames.index-1); // 记录起始列
if (index - this.dragState.start !== 0) {
this.dragState.direction =
index - this.dragState.start < 0 ? "left" : "right"; // 判断拖动方向
this.dragState.end = parseInt(index);
} 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.columnsInitial.length; i++) {
if (i === end) {
tempData.push(this.columnsInitial[start]);
} else if (i > min && i < max) {
tempData.push(this.columnsInitial[left ? i - 1 : i + 1]);
} else {
tempData.push(this.columnsInitial[i]);
}
}
this.columnsInitial = tempData;
}