element UI table二次封装不同功能列的基础上添加列的拖拽功能

背景：根据需求对element ui的table表格进行了二次封装，封装功能列有：可扩展列、展示数字添加单位列、点击事件列、过滤排序列等。封装完毕，以为大功告成，此刻添加了新需求，在原有表格中增加列的拖拽功能。

关于拖拽功能的实现，请参考这篇文章：http://www.jb51.net/article/138257.htm
如何将拖拽功能添加到我的组件中呢？
文章中：通过一个数组渲染表头（列），这个数组的v-for循环添加在el-table-column上，如下所示：

<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 tableHe