html表格列拖拽,table表格列顺序拖拽和列宽度拖拽

目前项目要求对表格可进行宽度拖拽和排序拖拽。用的第三方库库ant-desigin-vue。

对于列宽度拖拽

在ant-desigin-vue的table示例中有对应的案例，但是直接复制代码，会报错。最后看了源代码，对案例代码进行了修改。

安装第三方库

npm install vue-draggable-resizable --save

npm install sortablejs --save

引入import VueDraggableResizable from 'vue-draggable-resizable';

Vue.component('vue-draggable-resizable', VueDraggableResizable);

import Sortable from 'sortablejs'

详细代码

Delete

import Vue from 'vue';

import VueDraggableResizable from 'vue-draggable-resizable';

import Sortable from 'sortablejs'

Vue.component('vue-draggable-resizable', VueDraggableResizable);

let columns = [

{

title: 'Date1',

dataIndex: 'date',

width: 200,

filters:[]

},

{