View UI (iview)表格拖拽排序

news2025/4/18 12:26:47

在使用 iView UI 的 Table 组件进行拖拽排序时,可以通过以下步骤获取最新的排序数据:

1. 启用拖拽功能

在 Table 组件上设置 draggable 属性,并绑定拖拽结束事件 @on-row-drop

<template>
  <Table
    :columns="columns"
    :data="tableData"
    draggable
    @on-row-drop="handleRowDrop"
  ></Table>
</template>

2. 处理拖拽事件

在事件处理函数中,调整数据顺序并更新。

export default {
  data() {
    return {
      tableData: [/* 初始数据 */],
      columns: [/* 列配置 */]
    }
  },
  methods: {
    handleRowDrop({ oldIndex, newIndex }) {
      // 复制原数组避免直接修改
      const data = [...this.tableData];
      // 删除被拖拽的元素
      const item = data.splice(oldIndex, 1)[0];
      // 插入到新位置
      data.splice(newIndex, 0, item);
      // 更新数据(触发响应式更新)
      this.tableData = data;
      // 这里可以获取最新数据,比如提交到后端
      console.log('最新顺序:', this.tableData);
    }
  }
}

关键点说明:

  1. 索引获取@on-row-drop 事件会返回 oldIndex 和 newIndex,分别表示拖拽起始位置和目标位置。

  2. 数组操作:使用 splice 方法移动数组元素,保持数据不变性。

  3. 响应式更新:直接替换 this.tableData 会触发 Vue 的响应式更新,无需额外操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2331681.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2台8卡L20服务器集群推理方案

1、整体流程梳理 #mermaid-svg-0aNtsWUnOH7ewXpN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0aNtsWUnOH7ewXpN .error-icon{fill:#552222;}#mermaid-svg-0aNtsWUnOH7ewXpN .error-text{fill:#552222;stroke:#55…

HarmonyOS:使用geoLocationManager (位置服务)获取位置信息

一、简介 位置服务提供GNSS定位、网络定位&#xff08;蜂窝基站、WLAN、蓝牙定位技术&#xff09;、地理编码、逆地理编码、国家码和地理围栏等基本功能。 使用位置服务时请打开设备“位置”开关。如果“位置”开关关闭并且代码未设置捕获异常&#xff0c;可能导致应用异常。 …

系统分析师(二)--操作系统

概述 进程管理 选项A&#xff1a;该进程中打开的文件 进程中打开的文件是由整个进程来管理的&#xff0c;同一进程下的各个线程都可以对这些打开的文件进行访问和操作&#xff0c;所以进程中打开的文件是可以被这些线程共享的。 选项B&#xff1a;该进程的代码段 进程的代码…

安科瑞测频仪表:新能源调频困局的破局者

安科瑞顾强 在“双碳”目标推动下&#xff0c;风电、光伏等新能源正加速成为电力供应的核心力量。然而&#xff0c;新能源发电的间歇性与波动性&#xff0c;如同一把“双刃剑”&#xff0c;在提供清洁电力的同时&#xff0c;也给电网稳定运行带来了前所未有的挑战。国家能源局…

富士相机照片 RAF 格式如何快速批量转为 JPG 格式教程

富士&#xff08;Fujifilm&#xff09;相机拍摄的 RAW 格式文件&#xff08;RAF&#xff09;因其高质量和丰富的图像信息而受到摄影师的喜爱。然而&#xff0c;RAF 文件通常体积较大且不易于分享或直接使用。为了方便处理&#xff0c;许多人选择将其转换为更通用的 JPG 格式。在…

Linux 入门指令(1)

&#xff08;1&#xff09;ls指令 ls -l可以缩写成 ll 同时一个ls可以加多个后缀 比如 ll -at (2)pwd指令 &#xff08;3&#xff09;cd指令 cd .是当前目录 &#xff08;4&#xff09;touch指令 &#xff08;5&#xff09;mkdir指令 &#xff08;6&#xff09;rmdir和rm…

Redis缓存数据库一致性

前言&#xff1a; 在系统开发中经常使用关系型数据库&#xff0c;为了提升关系型数据库的读性能&#xff0c;一般会使用redis加一层缓存&#xff0c;缓存和数据库是分离的两次操作&#xff0c;本文用来分析如何操作能保证缓存和数据库的数据一致性。 一、读场景 二、写场景 …

Android Coil 3 Fetcher大批量Bitmap拼接成1张扁平宽图,Kotlin

Android Coil 3 Fetcher大批量Bitmap拼接成1张扁平宽图&#xff0c;Kotlin <uses-permission android:name"android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name"android.permission.READ_EXTERNAL_STORAGE" /><u…

文件相关:treecpmv命令扩展详解

拷贝和移动文件 序号命令对应英文作用01tree [目录名]tree以树状图列出文件目录结构02cp 源文件 目标文件copy复制文件或者目录03mv 源文件 目标文件move移动文件或者目录&#xff0f;文件或者目录重命名 一、 tree命令 &#xff08;1&#xff09;定义 tree 命令可以以树状…

S32K144的m_data_2地址不够存,重新在LD文件中配置地址区域

在开发平台软件的时候代码中超出了64K的内存&#xff0c;单纯在ld文件中&#xff0c;增加m_data_2的存储长度&#xff0c;原先是0x00007000,我将长度修改为0x00008000,起始地址还是0x20000000,软件编译没有报错堆栈超出&#xff0c;但是软件下载到单片机中之后&#xff0c;144不…

【STM32】综合练习——智能风扇系统

目录 0 前言 1 硬件准备 2 功能介绍 3 前置配置 3.1 时钟配置 3.2 文件配置 4 功能实现 4.1 按键功能 4.2 屏幕功能 4.3 调速功能 4.4 倒计时功能 4.5 摇头功能 4.6 测距待机功能 0 前言 由于时间关系&#xff0c;暂停详细更新&#xff0c;本文章中&#xff0c;…

【重装系统】大白菜自制U盘装机,备份C盘数据,解决电脑启动黑屏/蓝屏

1. 准备 U 盘 U 盘容量至少 8G&#xff0c;备份 U 盘的数据&#xff08;后期会格式化&#xff09; 2. 从微软官网下载操作系统镜像 https://www.microsoft.com/zh-cn/software-download/windows11 3. 下载安装大白菜 https://www.alipan.com/s/33RVnKayUfY 4. 插入 U 盘&#…

vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点

最近在用vue写官网&#xff0c;别问我为什么用vue写官网&#xff0c;问就是不会jq。。。。vue都出现11年了。。。 左侧目录&#xff1a;点击时&#xff0c;右侧区域可以自动滚动到指定的位置。 右侧区域手动滚动时&#xff0c;左侧锚点可以自动切换到对应的目录上 从而实现…

Flutter Invalid constant value.

0x00 问题 参数传入变量&#xff0c;报错&#xff01; 代码 const Padding(padding: EdgeInsets.all(20),child: GradientProgressIndicator(value: _progress), ),_progress 参数报错&#xff1a;Invalid constant value. 0x01 原因 这种情况&#xff0c;多发生于&#xff…

【精品PPT】2025固态电池知识体系及最佳实践PPT合集(36份).zip

精品推荐&#xff0c;2025固态电池知识体系及最佳实践PPT合集&#xff0c;共36份。供大家学习参考。 1、中科院化学所郭玉国研究员&#xff1a;固态金属锂电池及其关键材料.pdf 2、中科院物理所-李泓固态电池.pdf 3、全固态电池技术研究进展.pdf 4、全固态电池生产工艺.pdf 5、…

如何计算设备电池工作时长?

目录 【mAh&#xff08;毫安时&#xff09;计算方法】 【Wh&#xff08;瓦时&#xff09;计算方法】 【为什么仅用电流&#xff08;mA&#xff09;和时间&#xff08;h&#xff09;就能计算电池使用时长&#xff08;mAh&#xff09;&#xff1f;】 1. mAh 的本质是“电荷量…

抽象类及其特性

目录 1、概念2、语法3、特性4、作用 1、概念 在面向对象中&#xff0c;所有对象都是通过类来描述的&#xff0c;但是并不是所有的类都可以用来描述对象。比如下述例子中的 Animal 类&#xff0c;Dog 类和 Cat 类是 Animal 类的子类&#xff0c;可以分别描述小狗和小猫&#xf…

【教程】xrdp修改远程桌面环境为xfce4

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 目录 xfce4 vs GNOME对比 配置教程 1. 安装 xfce4 桌面环境 2. 安装 xrdp 3. 配置 xrdp 使用 xfce4 4. 重启 xrdp 服务 5. 配置防火墙&#xff…

利用python从零实现Byte Pair Encoding(BPE):NLP 中的“变形金刚”

BPE&#xff1a;NLP 界的“变形金刚”&#xff0c;从零开始的奇幻之旅 在自然语言处理&#xff08;NLP&#xff09;的世界里&#xff0c;有一个古老而神秘的传说&#xff0c;讲述着一种强大的魔法——Byte Pair Encoding&#xff08;BPE&#xff09;。它能够将普通的文本“变形…

部署redis cluster

一。在所有的主机里面设置密码和文件地址 vi /etc/redis/6379.conf 注释&#xff1a;登陆则要使用auth 123456才可以进入redis 配置文件地址和超时时间 二。创建集群&#xff1a;上面主机为master&#xff0c;下面为slave&#xff0c;master和slave会随机分配 先写主节点&…