vue3表格使用拖拽排序

拖拽排序

  • 实现效果
  • 实现步骤
  • 拖拽排序功能的完整代码

实现效果

在这里插入图片描述

实现步骤

  1. 安装sortable.js库
  2. 使用的vue文件中引入 import Sortablejs from ‘sortablejs’
  3. 在进入页面后创建sortable实例
  4. 在提交后端时可获取到排序后的最新table列表数据

sortable.js文档

拖拽排序功能的完整代码

<template>
  <div style="height: 100%">
    <!-- ...省略其他代码... -->
    <div class="table-box" style="height: 100%;">
      <el-table class="sort-el-table" row-key="id" v-loading="loading" :data="tableList"
                style="flex: 1;margin-bottom: 20px;" height="100%">
                <!-- table中拖拽排序列 -->
        <el-table-column label="拖拽排序" fixed width="120px" align="center">
          <template #default="scope">
            <el-icon class="sort-icon" style="cursor: pointer">
              <Rank/>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column
            label="XXX"
            align="left"
            prop="deptName"
            width="220"
            show-overflow-tooltip
            fixed
        >
        </el-table-column>
        <el-table-column
            label="XXX"
            align="center"
            prop="dataAperture"
            width="120"
            fixed
        >
          <template #default="scope">
            <el-link type="primary" @click="handleDetail(scope.row)">
              <dict-tag :options="task_data_aperture" :value="scope.row.dataAperture"/>
            </el-link>
          </template>
        </el-table-column>
        <!-- 合并表头的效果 -->
        <el-table-column label="历史数据" align="center">
          <el-table-column
              v-for="(item, index) in historyRiskResultVOList"
              :key="index"
              :prop="'dataYear'"
              :label="item"
              align="center"
              width="100"
          >
            <template #header>
              <span>{{ item }}</span>
            </template>
            <template #default="scope">
              <dict-tag
                  :canClick="false"
                  :options="risk_model_result_level"
                  :value="getTableColumnData(scope.row, index)"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="本期数据" align="center">
          <el-table-column
              v-for="(item, index) in forecastRiskResultVOList"
              :key="index"
              :prop="'dataYear'"
              :label="item"
              align="center"
              width="100"
          >
            <template #header>
              <span>{{ item }}</span>
            </template>
            <template #default="scope">
              <dict-tag
                  :canClick="false"
                  :options="risk_model_result_level"
                  :value="getTableColumnData2(scope.row, index)"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
            label="确认分析情况"
            align="center"
            prop="confirmDesc"
            show-overflow-tooltip
        />
      </el-table>
    </div>
    <div class="foot-btn">
      <el-button @click="backTo">上一步</el-button>
      <el-button type="primary" @click="nextStep">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import Sortablejs from 'sortablejs' //使用前先安装库

const {proxy} = getCurrentInstance();
const {task_data_aperture, risk_model_result_level} =
    proxy.useDict("task_data_aperture", "risk_model_result_level"); // 字典项
const emit = defineEmits(["backTo", "nextStep"]);

const historyRiskResultVOList = ref([])
const forecastRiskResultVOList = ref([])

const props = defineProps({
  taskObj: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 判断是否是编辑
  flag: {
    type: Boolean,
    default: false
  }
})

const loading = ref(false);
const tableList = ref([])

watch(() => props.taskObj, (v) => {
  // ...省略其他代码...
  nextTick(() => {
      // 进入页面后就开启表格拖拽排序
      const el = document.querySelector('.sort-el-table .el-table__body-wrapper  table tbody'); //  querySelector 方法选取页面上指定的元素。这里的选择器 '.sort-el-table .el-table__body-wrapper  table tbody' 定位到一个表格的 tbody 部分

      // 创建了一个 Sortable.js 实例,将 el 作为容器,用于拖拽排序
      Sortablejs.create(el, {
        animation: 150,
        ghostClass: 'blue-background-class',
        handle: '.sort-icon', // 指定了拖拽手柄的类名,如果需要点击某个图标拖拽的话需要吧那个图标的class写在这里
        onEnd: function (evt) { // 拖拽动作结束时触发
          let newIndex = evt.newIndex  // 排序后的索引位置
          let oldIndex = evt.oldIndex  // 排序前的索引位置
          if (newIndex !== oldIndex) { // 如果 newIndex 和 oldIndex 不相等,说明元素的位置发生了变化
            let currRow = tableList.value.splice(oldIndex, 1)[0]; // 从数组中移除原来位置的元素,并返回被移除的元素obj
            console.log("currRow:", currRow);
            tableList.value.splice(newIndex, 0, currRow); // 将被移除的该元素插入到新的位置
          }
        }
      })
    })
}, {immediate: true})


// 提交表格数据(根据表格顺序加index属性)
function nextStep() {
  tableList.value.forEach((item, index) => {
    item.index = index
  })
  console.log("当前的tableList:", tableList.value);
  return;
  emit('sortVal', tableList.value)
}
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot中常用的注解及其用法

1. 常用类注解 RestController和Controller是Spring中用于定义控制器的两个类注解. 1.1 RestController RestController是一个组合类注解,是Controller和ResponseBody两个注解的组合,在使 用 RestController 注解标记的类中&#xff0c;每个方法的返回值都会以 JSON 或 XML…

4 C 语言控制流与循环结构的深入解读

目录 1 复杂表达式的计算过程 2 if-else语句 2.1 基本结构及示例 2.2 if-else if 多分支 2.3 嵌套 if-else 2.4 悬空的 else 2.5 注意事项 2.5.1 if 后面不要加分号 2.5.2 省略 else 2.5.3 省略 {} 2.5.4 注意点 3 while 循环 3.1 一般形式 3.2 流程特点 3.3 注…

语音识别概述

语音识别概述 一.什么是语音&#xff1f; 语音是语言的声学表现形式&#xff0c;是人类自然的交流工具。 图片来源&#xff1a;https://www.shenlanxueyuan.com/course/381 二.语音识别的定义 语音识别&#xff08;Automatic Speech Recognition, ASR 或 Speech to Text, ST…

智能厕所系统让厕位状态清晰可见

在当今科技飞速发展的时代&#xff0c;智能化的应用已经渗透到我们生活的方方面面&#xff0c;智能厕所系统就是其中一个令人瞩目的创新。其中&#xff0c;厕位有人无人实时显示这一功能&#xff0c;为人们带来了极大的便利和舒适。 当身处一个繁忙的公共场所&#xff0c;如商场…

嵌入式全栈设计思路:STM32G4+ChibiOS+FreeRTOS+PID控制+PFC算法构建高效智能电源管理系统(附代码示例)

智能电源管理系统是一个基于STM32G4微控制器的高性能数字电源控制解决方案。本项目旨在设计一个功能全面、高效稳定的电源管理系统,可广泛应用于工业控制、新能源、通信设备等领域。 1.1 系统主要特点 高精度数字电源控制&#xff1a;利用STM32G4的高性能ADC和定时器,实现精确…

【NLP实战】基于TextCNN的新闻文本分类

TextCNN文本分类在pytorch中的实现 基于TextCNN和transformers.BertTokenizer的新闻文本分类实现&#xff0c;包括训练、预测、数据加载和准确率评估。 目录 项目代码TextCNN网络结构相关模型仓库准备工作项目调参预测与评估 1.项目代码 https://github.com/NeoTse0622/Te…

C++相关概念和易错语法(22)(final、纯虚函数、继承多态难点)

1.final final在继承和多态中都可以使用&#xff0c;在继承中是指不想将自己被继承&#xff0c;在多态中是指不想该函数被重写&#xff0c;比较简单&#xff0c;下面是一些使用例子。 2.纯虚函数 当我们需要抽象一个类的时候&#xff0c;我们就需要用到纯虚函数。所谓抽象的类…

【微服务】Spring Cloud Config解决的问题和案例

文章目录 强烈推荐引言解决问题1. 配置管理的集中化2. 配置的版本控制3. 环境特定配置4. 配置的动态刷新5. 安全管理敏感数据6. 配置的一致性 组件1. **配置服务器&#xff08;Config Server&#xff09;**2. **配置客户端&#xff08;Config Client&#xff09;** 配置示例配置…

电脑数据恢复软件哪个好?这六款软件轻松恢复数据

随着电脑使用的日益频繁&#xff0c;数据的丢失也成为了一个不可避免的问题。在生活中&#xff0c;我们常因误删除、误格式化、分区失败、中病毒等而丢失数据。在这种情况下&#xff0c;一个好的数据恢复软件就显得尤为重要。 电脑数据恢复软件哪个好&#xff1f;本文将为大家…

Midjourney 商业实战案例(附AI学习工具教程资料)

前言 Midjourney 商业实战案例 &#xff08;附AI学习工具教程资料&#xff09; 如何把 AI 绘画应用到设计工作中&#xff1f; AI 绘画技术可以应用于设计工作中&#xff0c;帮助设计师更快速、更高效地完成设计工作&#xff0c;以下是一些常见的应用&#xff1a; **1. 快速…

对接企业微信API自建应用配置企业可信IP

前言 为了实现系统调用团队会议功能&#xff0c;组织发起企业微信会议&#xff0c;于是需要和企业微信做API对接。对接过程很难受&#xff0c;文档不清晰、没有SDK、没有技术支持甚至文档报文和实际接口报文都不匹配&#xff0c;只能说企业微信的API是从业以来见过的最难用的AP…

【数据结构与算法 经典例题】判断二叉树是否对称

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法 经典例题》C语言 期待您的关注 目录 一、问题描述 二、解题思路 三、C语言实现代码 一、问题描述 给你一个二…

ENSP中NAT的相关实验(两个私网,一个公网)

题目 实验需求 1.按照图示配置IP地址&#xff0c;公网地址100.1.1.1/24 2.私网A通过NAPT&#xff0c;使R1接入到互联网&#xff0c;私网B通过EASY IP&#xff0c;使R3接入到互联网 3.私网A配置NAT SERVER把Telnet的Telnet服务发布到公网&#xff0c;使PC2可以访问 三、实验…

Vue中使用mind-map实现在线思维导图

概述 在前面的文章Vue中实现在线画流程图实现中介绍了流程图的在线绘制&#xff0c;在本文&#xff0c;给大家分享一下基于mind-map实现在线的思维导图&#xff0c;并实现&#xff1a;1. 导图导出为图片&#xff1b;2. 打开xmind文件。 实现效果 实现 1. mind-map简介 simp…

随笔(三):CSS

一、CSS .&#xff08;类选择器&#xff09;和 #&#xff08;ID选择器&#xff09;在CSS中的主要区别在于它们的选择范围和用途&#xff1a; 1. 选择范围 类选择器&#xff08;. 开头&#xff09;&#xff1a; 类选择器用于选择具有指定类名的所有HTML元素。由于一个HTML元素…

spring boot基础知识

spring boot是整合spring 一系列的包的坐标集合 对依赖进行整合 总体介绍 spring boot是用来方便构建项目的工具 spring cloud是用来方便spring boot项目之间进行数据交互通讯和配置的 spring cloud data Flow 是用来进行数据的连接的 Spring 缺点 配置繁琐 虽然Spring的组件代…

超市管理系统 需求分析与设计 UML 方向

一、项目介绍 1.1项目背景 随着经济一体化和电子商务的迅速发展&#xff0c;网络传播信息的速度打破了传统信息传递的模式&#xff0c;互联网的高速发展和计算机应用在各个高校进展迅速&#xff0c;更多信息化产品的突飞猛进&#xff0c;让现代的管理模式也发生了巨大的变化&…

vue数据缓存

data 对象未定义或未正确传递&#xff1a;确保 data 对象在你调用 onMounted 钩子时已经存在且包含 base.columns 属性。 columns 响应式引用未定义&#xff1a;确保 columns 是一个使用 ref 或 reactive 创建的响应式引用。 异步数据问题&#xff1a;如果 data 是通过异步操…

vue 搭建 pinia

文章目录 环境设置存储读取数据【 storeToRefs】借助storeToRefs将store中的数据转为ref对象&#xff0c;方便在模板中使用【getters】当state中的数据&#xff0c;需要经过处理后再使用时&#xff0c;可以使用getters配置【$subscribe】通过 store 的 $subscribe() 方法侦听 s…

用动态规划算法均分纸牌,谈谈理解思路

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…