iview+vue实现表头的拖拽功能

一、项目需求：

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

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

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

 

二、实现方法

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

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

1、表头拖拽

• 在vue的data里定义变量dragState

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

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

       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的代码可自行修改

// --------------------拖拽表头的事件----------------------------
    // 按下鼠标开始拖动
    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;
    }