首页 > 其他分享 >a-table(AntDesign Vue)实现表格行上下拖动排序

a-table(AntDesign Vue)实现表格行上下拖动排序

时间:2023-12-07 14:55:05浏览次数:39  
标签:index Vue tempDta targetObj sourceObj AntDesign table ev event

参考链接:

  1. https://blog.csdn.net/song_de/article/details/125218350
  2. https://blog.csdn.net/m0_61342618/article/details/132556739?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1-132556739-blog-125218350.235v39pc_relevant_3m_sort_dl_base2&spm=1001.2101.3001.4242.2&utm_relevant_index=4

                    <a-table
                            class="api-ant-table"
                            rowKey="itemId"
                            :scroll="{ x: true, y: true }"
                            :columns="columns"
                            :data-source="dicitemList"
                            :pagination="false"
                            :row-selection="{
                                selectedRowKeys: selectedRowKeys,
                                onChange: onSelectChange,
                                }"
                            :loading="loading"
                            :customRow="customRow"

                    >
                    <a-table/>
data() {
  return {
            dicitemList: [],
            sourceObj: null, // 原对象
            targetObj: null, // 目标对象
  }
},
methods: {
          customRow(record, index) {
            console.log(record, index);
            return {
                style: {
                    cursor: "move",
                },
                // 鼠标移入
                onm ouseenter: (event) => {
                    // 兼容IE
                    var ev = event || window.event;
                    ev.target.draggable = true;
                },
                // 开始拖拽
                onDragstart: (event) => {
                    // 兼容IE
                    var ev = event || window.event;
                    // 阻止冒泡
                    ev.stopPropagation();
                    // 得到源目标数据
                    this.sourceObj = record;
                },
                // 拖动元素经过的元素
                onDragover: (event) => {
                    // 兼容 IE
                    var ev = event || window.event;
                    // 阻止默认行为
                    ev.preventDefault();
                },
                // 鼠标松开
                onDrop: (event) => {
                    // 兼容IE
                    var ev = event || window.event;
                    // 阻止冒泡
                    ev.stopPropagation();
                    // 得到目标数据
                    this.targetObj = record;
                    console.log(this.sourceObj, this.targetObj);
                    const tempDta = this.dicitemList;
                    tempDta[this.targetObj.weight] = this.sourceObj;
                    tempDta[this.sourceObj.weight] = this.targetObj;
                    let weightList = [];
                    tempDta.forEach((item, index) => {
                        item.weight = index;
                        weightList.push({
                            id: item.id,
                            weight: index,
                        });
                    });
                    // this.handleWeightModify(weightList);// 更改顺序接口
                },
            };
        },

}


标签:index,Vue,tempDta,targetObj,sourceObj,AntDesign,table,ev,event
From: https://www.cnblogs.com/openmind-ink/p/17881992.html

相关文章

  • 小说网站|基于Springboot和Vue实现在线小说阅读网站
     作者简介:Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路 关注......
  • linux iptables操作
    1.查看iptables规则iptables-nL2.添加iptables规则iptables-AINPUT-s10.0.0.0/8-d10.0.0.0/8-ptcp-mmultiport--dports6379,6643-jACCEPT该命令使用 -AINPUT 将规则添加到过滤器的INPUT链(即入站流量),并指定以下条件:-s10.0.0.0/8:源IP地址是 10.0.0.......
  • vue中this.$set()的使用
    data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新;但在实际开发中,遇到过一个坑:若data中数据类型较为复杂,方法methods中改变对象的属性,而页面并不会改变原因是vue监听不到数据类型特别复杂的属性。可以使用this.$set()来进行强制更新,进而解决问题一。对象操作......
  • 【EMNLP 2023】面向Stable Diffusion的自动Prompt工程算法BeautifulPrompt
    近日,阿里云人工智能平台PAI与华南理工大学朱金辉教授团队合作在自然语言处理顶级会议EMNLP2023上发表了BeautifulPrompt的深度生成模型,可以从简单的图片描述中生成高质量的提示词,从而使文生图模型能够生成更美观的图像。BeautifulPrompt通过对低质量和高质量的提示进行微调,并进一步......
  • Vue + Element 实现按钮指定间隔时间点击
    1、业务需求需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次2、思路加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮3、实现1)vue页面<template><el-row:gutter="15"><el-col:span="4"><el-buttontype="danger"......
  • vue webpack 配置babel es6转化转化es5
    1、安装相关依赖npmi-D@babel/core@7.12.3npmi-D@babel/preset-env@7.12.1npmi-Dbabel-loader@8.0.6//语法中有asyncawait等npmi-D@babel/plugin-transform-runtime@7.23.4npmi-D@babel/runtime@7.23.52、babel.config.jsmodule.exports={pres......
  • .net core DataTable.Load()方法,返回的行缺少,少于reader读出的行
     我分析的原因是,datatable模式的schema默认是根据查询的sql来的。起因是我写的sql中带有主键的列,查出来有很多重复值,然后dt.load会默认把主键重复的行给合并掉,所以最终查询出来的都是主键不重复的数据行,重复的行都被合并掉了,所以就缺失了。另外,dt.load有个重载版本,我的理解是......
  • uni-app 基础架构搭建 ts+vue3 命令行
    1. 安装全局degitnpminstall-gdegit2.创建工程my-vue3-ts-project#创建以javascript开发的工程npxdegitdcloudio/uni-preset-vue#vitemy-vue3-ts-project#创建以ts开发的工程npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-ts-project3进入目录cdmy-v......
  • vue + 无限滚动不同高度
     <divclass="exbox"style="height:461px;overflow:auto"@mouseenter="handleMouseEnter()"@mouseleave="handleMouseLeave()">       <divclass="mainrollul"ref="textList"id="......
  • SQL ALTER TABLE 语句- 灵活修改表结构和数据类型
    SQLALTERTABLE语句SQLALTERTABLE语句用于在现有表中添加、删除或修改列,也可用于添加和删除各种约束。ALTERTABLE-添加列要在表中添加列,请使用以下语法:ALTERTABLE表名ADD列名数据类型;以下SQL向"Customers"表添加了一个"Email"列:ALTERTABLECustomersA......