引入sortablejs插件实现表格列拖拽功能的封装

1 参考其他文章

Vue+ElementUI 实现 动态调整表格列 显示隐藏&显示顺序

2 具体实现

2.1 将列拖拽功能封装到通用表格动态列组件里

关于表格动态列组件的具体代码,可以看我的另一篇博客:Vue - 基于Element UI封装一个表格动态列组件。

2.2 实现思路
  1. 引入sortablejs插件;
  2. 获取显示的表格列数据;
  3. 考虑动态列之前的列,如下图,Sortable获取的index是对应整个表格的列数据index,动态列数据需要减去emty;
    在这里插入图片描述
  4. 获取原来位置下标和新位置下标(考虑动态列表包含visible为false数据,作查找位置(findIndex)后找到其index下标);
  5. 删除原来位置列数据、在新位置插入该列数据;
  6. 使用时需要获取表格Dom元素,当一个页面有多个表格的情况,需要加一个类去获取到对应的表格Dom元素,故传入tableSign变量。

2.3 列拖拽具体代码

import Sortable from 'sortablejs'
export default {
	props: {
	    // 非必传,只有存在多个表格时,该参数作为表格的唯一标识,主要用于拖拽
	    tableSign: {
	      type: String,
	      default: null
	    },
	    // 所有的列字段,用于拖拽
	    schemas: {
	      type: Array,
	      default: () => {
	        return []
	      }
	    },
	    // 不在schemas内,并且在动态列之前的列数
	    empty: {
	      type: Number,
	      default: 0
	    },
    },
	mounted() {
	   // 表格拖拽方法
	   if (this.schemas.length > 0) {
	     this.columnDrop()
	   }
	},
	
	methods: {
		 /**
		  * 列拖拽
		  */
		 columnDrop() {
		   // 页面多个表格 取到对应表格dom元素
		   let wrapperClass = '.el-table__header-wrapper'
		   if (this.tableSign) {
		     const elClass = this.$parent.$el.getAttribute('class')
		     if (!elClass.includes(this.tableSign)) {
		       this.$parent.$el.setAttribute('class', `${elClass} ${this.tableSign}`)
		     }
		     wrapperClass = `.${this.tableSign} ${wrapperClass}`
		   }
		   const wrapperTr = document.querySelector(`${wrapperClass} tr`)
		
		   this.sortable = Sortable.create(wrapperTr, {
		     animation: 100, // 过渡动画
		     delay: 0, // 延迟多久可以拖动
		     onEnd: (evt) => {
		       if (evt.oldIndex === evt.newIndex) return
		
		       const overviewColumns = [...this.schemas]
		       const visbleColumns = overviewColumns.filter((v) => v.visible) // 显示的列
		       const empty = this.empty // 不在schemas内,并且在动态列之前的列数
		
		       // 注意:动态列表包含visible为false数据,需要进行特殊查找位置处理
		       const oldItem = visbleColumns[evt.oldIndex - empty]
		       const newItem = visbleColumns[evt.newIndex - empty]
		
		       const realOldIndex = overviewColumns.findIndex(
		         (item) => item.prop === oldItem.prop
		       )
		       const realNewIndex = overviewColumns.findIndex(
		         (item) => item.prop === newItem.prop
		       )
		       overviewColumns.splice(realOldIndex, 1) // 删除原来位置的数据
		       overviewColumns.splice(realNewIndex, 0, oldItem) // 在新的位置插入该数据
		
		       this.$emit('changeColumn', overviewColumns)
		     }
		   })
		 }
	}
}

2.4 在页面中使用

        <el-table
          ref="allListTableRef"
          v-loading="tableLoading"
          size="mini"
          :data="infoList"
          height="430px"
          :cell-style="cellStyle"
          @sort-change="handleSortChange"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />

          <DynamicColumn
            v-for="(ite, index) in overviewColumns"
            :key="index"
            :item="ite"
            :empty="1"
            :data-list="infoList"
            table-sign="all-list"
            :schemas="overviewColumns"
            @changeColumn="(cols)=>{overviewColumns=cols;}"
          />

          <el-table-column
            :label="$t('operate')"
            prop="operate"
            align="center"
            width="200"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['investmentDecision:etfPool:etfList:index:detail']"
                type="text"
                size="mini"
                icon="el-icon-info"
                @click="goDetail(scope.row)"
              >{{ $t("viewDetails") }}</el-button>
            </template>
          </el-table-column>
        </el-table>

      // 动态列
      overviewColumns: this.$columns.getColumns('etfPool_list_overview'),
      // 表格数据
      infoList: [],

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

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

相关文章

linux中deadline调度原理与代码注释

简介 deadline调度是比rt调度更高优先级的调度&#xff0c;它没有依赖于优先级的概念&#xff0c;而是给了每个实时任务一定的调度时间&#xff0c;这样的好处是&#xff1a;使多个实时任务场景的时间分配更合理&#xff0c;不让一些实时任务因为优先级低而饿死。deadline调度…

openGauss学习笔记-165 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导入数据-通过本地文件导入导出数据

文章目录 openGauss学习笔记-165 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导入数据-通过本地文件导入导出数据165.1 示例1&#xff1a;通过本地文件导入导出数据 openGauss学习笔记-165 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导…

Hutool--DFA 敏感词工具类

使用hutool的dfa工具类可以很好的帮助我们来实现敏感词过滤的功能&#xff0c;下面从用例入手来逐步地去j简单了解一下dfa工具类。 字典树 DFA算法的核心是建立了以敏感词为基础的许多敏感词树&#xff08;字典树&#xff09;。 它的基本思想是基于状态转移来检索敏感词。 字…

C++复合数据类型:vector|string

文章目录 模板类vector初始化访问修改添加 标准库类型string初始化访问拼接比较字符串 模板类vector 初始化 访问 修改 添加 数组长度在初始化时已经定义&#xff0c;访问范围也有限&#xff0c;数组长度还得通过计算 所以C中定义了很多扩展的“抽象数据类型”&#xff0c…

深度学习 tensorflow基础介绍

深度学习是一种基于人工神经网络的机器学习方法&#xff0c;其目标是通过模仿人脑的结构和功能&#xff0c;实现对大量复杂数据的学习和理解。它可以在图像识别、语音识别、自然语言处理等领域取得惊人的成就。 深度学习的引入引出了TensorFlow&#xff0c;它是一个由Google Br…

go语言指针变量定义及说明

go语言指针主要需要记住两个特殊符号&#xff0c; 一个是 & 用来获取变量对应的内存地址 另一个是 * 用来获取指针对应的变量值 下面是个最简单的go语言指针说明 package mainimport "fmt"//指针为内存地址func main() {var a string "指针对应的变量&…

互联网中的商品超卖问题及其解决方案:Java中Redis结合UUID的应用

前言 在设计商品下单和库存扣减&#xff0c;你一定遇到过这样的问题&#xff0c;库存扣减为0了&#xff0c;可是消费者还能下单&#xff0c;并将订单信息保存到了数据库里&#xff0c;针对商品超卖问题&#xff0c;作此篇以解决。 随着互联网商业的飞速发展&#xff0c;商品超…

【OpenHarmony】下载指定时间点的代码

1、正常初始化 repo init -u gitgitee.com:openharmony/manifest.git -b master --no-repo-verify 2、获取tag点的manifest文件 在OpenHarmony的CI系统上&#xff0c;进入tag管理系统。http://ci.openharmony.cn/workbench/cicd/codecontrol/tagsystem找到自己所需的tag文件…

PyQt6 QFontDialog字体对话框控件

锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计50条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话版…

钓鱼篇(上)

前言 钓鱼的核心主要还是思路要大胆。今天主要从一个完整的钓鱼流程进行讲解&#xff0c;记录下自己在学习这方面的知识时&#xff0c;如何将其有机结合起来&#xff0c;实现一个蓝队无感的钓鱼攻击流程&#xff0c;真正体验下如何从细节入手&#xff0c;将最危险的地方化为最…

LeetCode Hot100 51.N皇后

题目&#xff1a; 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的…

LeetCode刷题--- 电话号码的字母组合

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述递归递归、搜…

Java Catching and Handling Exceptions(二)

一、Try with resources语句 try with resources语句是声明一个或多个资源的try语句。资源是程序使用完后必须关闭的对象。try with resources语句确保在语句末尾关闭每个资源。任何实现java.lang.AutoCloseable的对象&#xff08;包括实现java.io.Closeable的所有对象&#x…

探秘 AJAX:让网页变得更智能的异步技术(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

基于ssm计算机科学与技术学习网站的设计与开发论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本在校学习网站就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…

【MySQL】Sql优化之索引的使用方式(145)

索引分类 1.单值索引 单的意思就是单列的值&#xff0c;比如说有一张数据库表&#xff0c;表内有三个字段&#xff0c;分别是 id name numberNo&#xff0c;我给name 这个字段加一个索引&#xff0c;这就是单值索引&#xff0c;因为只有name 这一列是索引&#xff1b; 一个表…

【SpringBoot篇】基于Redis实现生成全局唯一ID的方法

文章目录 &#x1f354;生成全局唯一ID&#x1f339;为什么要生成全局唯一id&#x1f33a;生成全局id的方法✨代码实现 &#x1f354;生成全局唯一ID 是一种在分布式系统下用来生成全局唯一id的工具 在项目中生成全局唯一ID有很多好处&#xff0c;其中包括&#xff1a; 数据…

k8s集群1.23.0版本部署说明

1.部署 k8s1.23.0版本与1.26.0版本的部署基本差不多&#xff0c;只不过k8s 1.23版本不需要部署cri-docker&#xff0c;所以只需要在1.26.0版本部署的基础上不要cri-docker的部署即可 参考&#xff1a;kubeadm部署k8s 1.26.0版本高可用集群_kubeadm 高可用集群-CSDN博客 搭建…

动手学深度学习1 导学

深度学习导学课 课程基础信息整理00 预告01 课程安排02 深度学习介绍QA 课程基础信息整理 课程安排&#xff1a; https://courses.d2l.ai/zh-v2/ ppt 代码 视频等链接都在文档里有展现 李沐老师课程所用电子书&#xff1a;https://zh-v2.d2l.ai/ B站课程链接&#xff1a; http…