vue + antdesign使用vue-draggable-resizable实现表格列拖拽

<template>
  <a-table :columns="columns" :dataSource="data">
    <template v-slot:bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'action'">
        <a-space>
          <a>编辑</a>
          <a>删除</a>
        </a-space>
      </template>
    </template>
  </a-table>
</template>
 
<script>
import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
 
export default {
  components: {
    VueDraggableResizable,
  },
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          width: 200,
          resizable: true,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          width: 200,
          resizable: true,
        },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 200,
          resizable: true,
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
        },
        // ... more data
      ],
    };
  },
  methods: {
    onDrag(index) {
      console.log('Column dragged from index ' + index);
    },
    onResize(index, size) {
      console.log('Column resized at index ' + index + ' to size ' + size);
    },
  },
};
</script>

在这个代码示例中，我们使用了Ant Design Vue的a-table组件来展示数据，并通过自定义bodyCell插槽来实现列的自定义渲染。我们还使用了vue-draggable-resizable组件来实现列标题的拖拽和大小调整功能。这个示例展示了如何将拖拽和缩放功能集成到表格列中，并提供了相应的方法来处理拖拽和缩放事件。