项目里面使用到vue2,但是ant design vue版本还是一版本,所以不会写,版本过低怎么进行表格拖拽功能。
1.安装 sortablejs 插件。
使用 npm 安装 sortablejs 插件:
npm install sortablejs --save
在组件中引入 sortablejs 插件。
在组件中引入 sortablejs 插件:
import Sortable from 'sortablejs';
在表格上添加 ref 属性。
在表格上添加 ref 属性,以便在组件代码中引用该表格。
<Table
ref="table"
:columns="columns"
:dataSource="dataSource"
...
/>
在表格渲染后初始化 sortable 对象。
在表格渲染后使用 this.$nextTick() 获取到表格的 DOM 元素并初始化 sortable 对象。
mounted() {
this.$nextTick(() => {
const el = this.$refs.table.$el.querySelector('.ant-table-tbody');
const sortable = new Sortable(el, {
draggable: 'tr',
handle: '.ant-table-draggable-handle',
onEnd: this.handleDragEnd // 拖拽结束时的回调函数
});
});
},
其中 draggable 属性表示可以被拖拽的元素,这里为表格中的 tr;handle 属性表示拖拽的手柄元素,这里为表格中的 .ant-table-draggable-handle 类;onEnd 属性表示拖拽结束时的回调函数,这里为 handleDragEnd。
实现拖拽结束时的回调函数。
在组件中定义 handleDragEnd 方法,用于在拖拽结束时更新数据源(dataSource)。
methods: {
handleDragEnd(event) {
const oldIndex = event.oldIndex;
const newIndex = event.newIndex;
// 更新数据源
const newData = [...this.dataSource];
const [removed] = newData.splice(oldIndex, 1);
newData.splice(newIndex, 0, removed);
this.dataSource = newData;
}
}
应客户要求,表格要实现左右拖动列边框实现列宽的扩大和缩小;ant-design-vue官方文档中,table组件中提供了此功能的示例代码。尝试过程中处处报错。经过多次百度与尝试最后整理出一套可用的代码。这篇笔记以 步骤 的形式一步一步的记录如何实现这个功能。