第一步:下载sortablejs插件
npm install sortablejs --save
第二步:在页面中引入sortablejs
import Sortable from 'sortablejs'
第三步:代码示例
如果需要实现开关可控制的表格拖拽功能,可以通过v-if或v-show指令控制Table组件的显示与隐藏,在开关被关闭时禁用sortable功能,在开关被打开时启用sortable功能。
以下是一个示例代码:
<template>
<div>
<a-switch v-model="dragEnabled">表格拖拽</a-switch>
<a-table :columns="columns" :data-source="dataSource" v-if="dragEnabled" :row-key="record => record.id">
...
</a-table>
<a-table :columns="columns" :data-source="dataSource" v-else :row-key="record => record.id">
...
</a-table>
</div>
</template>
<script>
import Sortable from 'sortablejs';
export default {
components: {
'a-table': Table,
'a-switch': Switch,
},
data() {
return {
dragEnabled: false,
columns: [
{
title: '姓名',
dataIndex: 'name'
},
...
],
dataSource: [
{ id: 1, name: '张三', ... },
{ id: 2, name: '李四', ... },
...
],
};
},
mounted() {
// 在Table组件渲染完毕后启用或禁用sortable功能
this.$nextTick(() => {
if (this.dragEnabled) {
this.enableDrag();
} else {
this.disableDrag();
}
});
},
watch: {
// 监听dragEnabled属性的变化,启用或禁用sortable功能
dragEnabled(value) {
if (value) {
this.enableDrag();
} else {
this.disableDrag();
}
},
},
methods: {
// 启用sortable功能
enableDrag() {
const tableEl = this.$el.querySelector('.ant-table-tbody');
const sortable = Sortable.create(tableEl, {
animation: 150,
onEnd: this.onDragEnd, // 拖拽结束后更新数据源顺序
});
this.sortable = sortable;
},
// 禁用sortable功能
disableDrag() {
if (this.sortable) {
this.sortable.destroy();
this.sortable = null;
}
},
// 拖拽结束后更新数据源顺序
onDragEnd(evt) {
const { oldIndex, newIndex } = evt;
const record = this.dataSource.splice(oldIndex, 1)[0];
this.dataSource.splice(newIndex, 0, record);
},
},
};
</script>