vxe-table grid 拖动列

vxe-table 是一个基于 Vue.js 的表格组件库，它提供了一些实用的功能，包括拖动表头排序、拖动列宽调整、固定表头和列、分页、过滤、导出等等。

要实现拖动列的功能，可以使用 vxe-table 的拖动列插件。这个插件可以让用户通过鼠标拖动表头来调整列的位置。

首先要确保已经安装了 vxe-table 组件库和插件：

npm install --save vxe-table vxe-table-plugin-drag

然后在 Vue 组件中引入 vxe-table 和插件：

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import VXETablePluginDrag from 'vxe-table-plugin-drag'

Vue.use(VXETable)
VXETable.use(VXETablePluginDrag)

接下来就可以在表格组件中使用拖动列了：

<template>
  <vxe-table :data="tableData" border resizable :column-draggable="true">
    <vxe-column field="id" title="ID" width="80" align="center" sortable></vxe-column>
    <vxe-column field="name" title="Name" width="120" align="center"></vxe-column>
    <vxe-column field="age" title="Age" width="80" align="center" sortable></vxe-column>
    <vxe-column field="address" title="Address" min-width="200" align="center"></vxe-column>
  </vxe-table>
</template>

在上面的代码中，我们通过在 `<vxe-table>` 组件上设置 `column-draggable` 属性为 `true` 来启用拖动列功能。然后在每个 `<vxe-column>` 组件上设置字段、标题、宽度和对齐方式等属性，就可以渲染出一个带有拖动列功能的表格了。

需要注意的是，拖动列插件不支持固定列和表头，如果需要这些功能，可以考虑使用其他插件或自己编写代码来实现。