###
实现 Vue3
+ TypeScript
+ Ant Design
+ Vuedraggable 的 A
-Table 行
拖拽排序功能
在
Vue3 项目中结合 TypeScript、Ant Design
Vue 与
Vuedraggable 实现 `a
-table` 的行
拖拽排序功能，可以通过以下方式
实现：
#### 1
. 使用
Vuedraggable 包裹表格行
使用 `
vuedraggable` 的 `tag="tbody"` 属性将表格行包裹，通过 `v
-model` 绑定数据源
实现拖拽排序功能。该方式能够有效控制行的顺序，并通过 `ghost
-class` 提供
拖拽时的视觉反馈。
```
vue
<template>
<a
-table :columns="columns" :dataSource="dataSource" :customRow="() => ({ style: { cursor: 'move' } })">
<template #body>
<
draggable v
-model="dataSource" tag="tbody" ghost
-class="ghost" handle="
.drag
-handle" @change="onDragChange">
<tr v
-for="(item, index) in dataSource" :key="item
.key" class="ant
-table
-row">
<td class="drag
-handle">☰</td>
<td>{{ item
.name }}</td>
<td>{{ item
.age }}</td>
<td>{{ item
.address }}</td>
</tr>
</
draggable>
</template>
</a
-table>
</template>
```
#### 2
. 数据源与响应式绑定
在 `setup` 中定义 `dataSource` 为 `ref`，确保其为响应式数据，并通过 `v
-model` 与 `
draggable` 进行双向绑定，
实现拖拽后数据源的自动更新。
```ts
<script>
import { ref } from '
vue';
import
draggable from '
vuedraggable';
export default {
components: {
draggable
},
setup() {
const columns = [
{ title: '操作', dataIndex: 'action', key: 'action', width: 60 },
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '年龄', dataIndex: 'age', key: 'age' },
{ title: '地址', dataIndex: 'address', key: 'address' }
];
const dataSource = ref([
{ key: '1', name: '张三', age: 32, address: '北京市' },
{ key: '2', name: '李四', age: 28, address: '上海市' },
{ key: '3', name: '王五', age: 30, address: '广州市' }
]);
const onDragChange = (event) => {
console
.log('
拖拽发生变化:', event);
};
return {
columns,
dataSource,
onDragChange
};
}
};
</script>
```
#### 3
. 自定义行样式与
拖拽手柄
通过 `customRow` 设置行样式，增强交互体验。使用 `handle="
.drag
-handle"` 指定
拖拽手柄，避免误触发，确保仅在特定列允许
拖拽操作。
```ts
:customRow="() => ({ style: { cursor: 'move' } })"
```
同时，在行中添加一个 `td` 作为
拖拽手柄，并设置样式以提升用户体验：
```html
<td class="drag
-handle">☰</td>
```
```css
.drag
-handle {
cursor: move;
padding: 8px;
background
-color: #f0f0f0;
}
```
#### 4
. 控制某些列不可
拖拽
如果需要控制某些列不可
拖拽，可以在 `customRow` 中结合 `onmouseenter` 与 `onmouseleave` 动态修改行的 `
draggable` 属性，如下所示：
```ts
const customRow = (record: any, index: any) => {
return {
style: { cursor: 'default' },
onmouseenter: (event: any) => {
const ev = event || window
.event;
ev && ev
.stopPropagation();
const nowRow = ev?
.target?
.closest('tr
.ant
-table
-row');
nowRow
.draggable = false;
nowRow
.style
.cursor = 'default';
},
onmouseleave: (event: any) => {
const ev = event || window
.event;
ev && ev
.stopPropagation();
const nowRow = ev?
.target?
.closest('tr
.ant
-table
-row');
nowRow
.draggable = true;
nowRow
.style
.cursor = 'move';
}
};
};
```
#### 5
. 拖拽事件处理
通过 `@change="onDragChange"` 监听
拖拽变化事件，可以在控制台输出
拖拽详情，也可用于持久化数据更新。
```ts
const onDragChange = (event) => {
console
.log('
拖拽发生变化:', event);
};
```
#### 6
. TypeScript 类型定义
为确保类型安全，可以定义数据源的类型：
```ts
interface TableRow {
key: string;
name: string;
age: number;
address: string;
}
```
并在 `dataSource` 中使用：
```ts
const dataSource = ref<TableRow[]>([
{ key: '1', name: '张三', age: 32, address: '北京市' },
{ key: '2', name: '李四', age: 28, address: '上海市' },
{ key: '3', name: '王五', age: 30, address: '广州市' }
]);
```
### 总结
通过上述方式，可以在
Vue3
+ TypeScript
+ Ant Design
Vue + Vuedraggable 的项目中
实现 `a
-table` 的行
拖拽排序功能。结合 `
vuedraggable` 的
拖拽能力与 `customRow` 的自定义逻辑，可以灵活控制
拖拽行为并提升用户体验。
本文介绍如何在Vue.js项目中安装并使用Vue.Draggable组件，实现元素的拖拽排序功能。通过npm安装，引入并在组件中注册Vue.Draggable，设置v-model和options选项来定制拖拽行为。
扫一扫
5717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
