vue2 antdesign table 支持列拖拽

  <div>
    <!--  -->
    <a-table :key="columns.length"  ref="dragTable" bordered row-key="key" :row-selection="rowSelection" :columns="getColumns()"  :data-source="data" :scroll="{ x: scrollx }">
      <template v-slot:action>
        <a href="javascript:;">Delete</a>
      </template>
    </a-table>
  </div>
</template>

<script>
import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
import Sortable from 'sortablejs'
const columns = [
  {
    title: 'Date',
    dataIndex: 'date',
    width: 200,
    fixed:'left'
  },
  {
    title: 'Date1',
    dataIndex: 'date1',
    fixed:'left',
    width: 200
  },
  {
    title: 'Date2',
    dataIndex: 'date2',
    width: 200
  },
  {
    title: 'Date3',
    dataIndex: 'date3',
    width: 200
  },
  {
    title: 'Date4',
    dataIndex: 'date4',
    width: 200
  },
  {
    title: 'Date5',
    dataIndex: 'date5',
    width: 200
  },
  {
    title: 'Date6',
    dataIndex: 'date6',
    width: 200
  },
  {
    title: 'Date7',
    dataIndex: 'date7',
    width: 200
  },
  {
    title: 'Amount',
    dataIndex: 'amount',
    width: 100,
  },
  {
    title: 'Type',
    dataIndex: 'type',
    width: 100,
  },
  {
    title: 'Note',
    dataIndex: 'note',
    width: 100,
  },
  {
    title: 'Action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: 200
  }
];
const data = [
  {
    key: 0,
    date: '2018-02-11',
    date1: 'date1',
    date2: 'date2',
    date3: 'date3',
    date4: 'date4',
    date5: 'date5',
    date6: 'date6',
    date7: 'date7',
    amount: 120,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 1,
    date: '2018-03-11',
    date1: 'date1',
    date2: 'date2',
    date3: 'date3',
    date4: 'date4',
    date5: 'date5',
    date6: 'date6',
    date7: 'date7',
    amount: 243,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 2,
    date: '2018-04-11',
    date1: 'date1',
    date2: 'date2',
    date3: 'date3',
    date4: 'date4',
    date5: 'date5',
    date6: 'date6',
    date7: 'date7',    
    amount: 98,
    type: 'income',
    note: 'transfer',
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};
export default {
  name: 'ITable',
  data() {
    this.components = {
      header: {
        cell: this.resizeableTitle
      }
    }
    return {
      data,
      columns,
      rowSelection
    }
  },
  computed:{
    scrollx(){
      let result = 0
      this.columns.forEach(item=>{
        result+=item.width
      })
      return result
    },
  },
  mounted() {
    this.columnDrop()
  },
  methods: {
    getColumns() {
      return this.columns
    }, 
    columnDrop() {
      const wrapperTr = document.querySelector('.ant-table-body .ant-table-thead tr')
      Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          if (evt.oldIndex === evt.newIndex) {
            return false
          }
          const oldItem = Object.assign({}, this.columns[evt.oldIndex-1])
          this.columns.splice(evt.oldIndex-1, 1)
          this.columns.splice(evt.newIndex-1, 0, oldItem)
        }
      })
    },
    resizeableTitle(h, props, children) {
      const draggingMap = {};
      columns.forEach(col => {
        draggingMap[col.key] = col.width;
      });
      const draggingState = Vue.observable(draggingMap);
      let thDom = null;
      const { key, ...restProps } = props;
      const col = columns.find(col => {
        const k = col.dataIndex || col.key;
        return k === key;
      });
      if (!col || !col.width) {
        return (
          <th {...restProps}>
            <span>{children}</span>
          </th>
        )
      }
      const onDrag = x => {
        draggingState[key] = 0;
        col.width = Math.max(x, 1);
      };

      const onDragstop = () => {
        draggingState[key] = thDom.getBoundingClientRect().width;
      };
      return (
        <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
          <span>{children}</span>
          <vue-draggable-resizable
            key={col.key}
            class="table-draggable-handle"
            w={10}
            x={draggingState[key] || col.width}
            z={1}
            axis="x"
            draggable={true}
            resizable={false}
            onDragging={onDrag}
            onDragstop={onDragstop}
          ></vue-draggable-resizable>
        </th>
      );
    }
  }
}
</script>
<style lang="less">
.sortable-ghost{
  border-left: red 2px solid;
}
.resize-table-th {
  position: relative;

  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
    position: absolute;
  }
}
</style>