当前位置: 首页 > article >正文

【VUE】ant design vue实现表格table上下拖拽排序

适合版本:ant design vue 1.7.8 

实现效果:

代码:

<template>
    <div class="table-container">
        <a-table
            :columns="columns"
            :dataSource="tableData"
            :rowKey="record => record.id"
            :rowClassName="getRowClassName"
        >
            <template v-slot:action="text,record">
                <a-button type="primary" icon="drag" @mousedown="startDrag(record, $event)"></a-button>
            </template>
        </a-table>
    </div>
</template>

<script>
import { Table, Button } from 'ant-design-vue';

export default {
    components: {
        'a-table': Table,
        'a-button': Button
    },
    data() {
        return {
            tableData: [
                { id: 1, name: 'Item 1' },
                { id: 2, name: 'Item 2' },
                { id: 3, name: 'Item 3' }
            ],
            columns: [
                { title: 'ID', dataIndex: 'id', key: 'id' },
                { title: 'Name', dataIndex: 'name', key: 'name' },
                {
                    title: 'Action',
                    key: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            draggingItem: null,
            draggingIndex: -1
        };
    },
    methods: {
        getRowClassName(record, index) {
            return index === this.draggingIndex ? 'dragging-row' : '';
        },
        startDrag(record, event) {
            this.draggingItem = record;
            this.draggingIndex = this.tableData.findIndex(item => item.id === record.id);
            document.addEventListener('mousemove', this.onDrag);
            document.addEventListener('mouseup', this.stopDrag);
        },
        onDrag(event) {
            const mouseY = event.clientY;
            const tableRows = document.querySelectorAll('.ant-table-row');
            let targetIndex = -1;

            tableRows.forEach((row, index) => {
                const rect = row.getBoundingClientRect();
                if (mouseY >= rect.top && mouseY <= rect.bottom) {
                    targetIndex = index;
                }
            });

            if (targetIndex !== -1 && targetIndex !== this.draggingIndex) {
                const [draggedItem] = this.tableData.splice(this.draggingIndex, 1);
                this.tableData.splice(targetIndex, 0, draggedItem);
                this.draggingIndex = targetIndex;
            }
        },
        stopDrag() {
            document.removeEventListener('mousemove', this.onDrag);
            document.removeEventListener('mouseup', this.stopDrag);
            this.draggingItem = null;
            this.draggingIndex = -1;
        }
    }
};
</script>

<style>
.dragging-row {
    background-color: #f0f0f0;
    cursor: grabbing;
}
</style>


http://www.kler.cn/a/590561.html

相关文章:

  • 使用 LangGraph 构建智能客服代理系统(DeepSeek 版)
  • 如何启用 HTTPS 并配置免费的 SSL 证书
  • MySQL DBA 运维常用命令
  • STC89C52单片机学习——第22节: LED点阵屏显示图形动画
  • Spring Boot整合JWT 实现双Token机制
  • Maven核心包:maven-resolver-api
  • Netty基础—5.Netty的使用简介
  • 小程序主包方法迁移到分包-调用策略
  • HTB 学习笔记 【中/英】《前端 vs. 后端》P3
  • API接口自动化学习总结
  • 共享 IP 与独立 IP:长期邮件营销的优劣比较
  • 解决QT_Debug 调试信息不输出问题
  • 【笔记】SQL进阶教程(第二版)
  • SpringBoot3+SaToken+JWT:轻量化权限认证实战指南
  • Launcher3 Hotseat区域动态插入All Apps按钮实现方案
  • Elasticsearch搜索引擎 3(DSL)
  • 数学建模:模型求解方法
  • Windows Qt动态监测系统分辨率及缩放比变化
  • 大动作!百度发布文心大模型4.5、文心大模型X1
  • Shp文件转坐标并导出到Excel和JSON(arcMap + excel)