element-ui的table 列拖拽问题？

Question

大哥们， 有个问题

使用的是element-ui的el-table, 列的数据是循环出来的。

想要实现的功能是:

1. 列之间可以拖拽。
2. 且每一列又可以拖到上面去。
3. 上面如果有了就不能拖上去了。

4. 上面被拖进去的列是可以点击删除的。

   <template>
     <div>
    <div style="border: 1px solid #ccc; padding: 10px;" id="dragArea">
      <p v-if="nodata">please drag here</p>
    </div>
    <el-table 
      row-key="date" 
      ref="table" 
      border 
      :data="tableData" 
      style="width: 100%">
      <el-table-column 
      v-for="(item, index) in columns" 
      :label="item.label" 
      :key="index+''+Math.random()"
      width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pre>{{ columns }}</pre>
    <pre>{{ tableData }}</pre>
     </div>
   </template>
    <script>
   import Sortable from 'sortablejs'
   export default {
     data() {
    return {
      columns: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        },
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      nodata: true,
    }
     },
     created() {
    // this.dragCols = this.columns
     },
     mounted() {
   
    this.columnDrop();
   
    this.columnDrag()
     },
     updated() {
    this.columnDrop();
     },
     methods: {
    columnDrop() {
      const tr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(tr, {
        animation: 180,
        delay: 0,
        group: {
          name: 'table',
          pull: 'clone',
          put:false,
        },
        onEnd: evt => {
          const oldItem = this.columns[evt.oldIndex]
          const newItem = this.columns[evt.newIndex];
          this.$set(this.columns, evt.newIndex, oldItem);
          this.$set(this.columns, evt.oldIndex, newItem);
        },
      })
    },
    columnDrag() {
      const da = document.getElementById('dragArea')
      Sortable.create(da, {
        group: {
          name: 'table',
        },
        sort: false,
        put: evt => {
        }
      })
    },
     }
   }
   </script>
   
   <style scoped>
   </style>

大哥们帮帮忙！🙏🏻🙏🏻🙏🏻