vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽

如需有对el-table表格进行拖拽的需求,请点击:
eleplus对el-table表格进行拖拽(使用sortablejs进行列拖拽和行拖拽):-CSDN博客
 如果你已实现拖拽需求,但拖拽后发现表头并未改变的话,请点击:

解决el-table表格拖拽后,只改变了数据,表头没变的问题-CSDN博客

先看看是不是你想要的。

限制拖拽

Sortable.js中文网

sortableJs有个配置项是filter,过滤掉不可进行拖拽的列或行。

本文采用vue3+ele-plus的table组件结合sortableJs插件对表格拖拽需求进行开发:

列拖拽:

使用:header-cell-class-name="headerCellClassName"对el-table的列增加headerClassFilter类名,有此类名的行不可进行拖拽(在Sortable.create实例中对headerClassFilter类名进行过滤,即filter绑定的类名)。

<template><div><el-table:data="tableData"borderscrollbar-always-onref="tableHeader"row-key="id":header-cell-class-name="headerCellClassName"><template v-for="item in setColumns" :key="item.label"><!-- 操作列 --><el-table-columnv-if="item.prop === 'oprate'"fixed="right":prop="item.prop":label="item.label"><template #header><div class="search-title"><div :class="checked ? 'search-titleName' : ''">操作</div><el-icon class="search-icon" @click="search"><Search color="#409EFF" /></el-icon></div></template></el-table-column><!-- 序号列 --><el-table-columnv-else-if="item.prop === 'index'":type="item.type":label="item.label":width="item.width || 100"/><!-- 数据列 --><el-table-columnv-else:prop="item.prop":label="item.label":width="item.width || 100"/></template></el-table></div>
</template><script setup lang='js'>import { ref, onMounted } from 'vue'import Sortable from 'sortablejs';let setColumns = ref([{prop: 'index',label: '序号',type: 'index'},{prop: 'name',label: '姓名'},{prop: 'address',label: '地址'},{prop: '11',label: '1'},{prop: '22',label: '2'},{prop: '33',label: '3'},{prop: '44',label: '4'},{prop: '55',label: '5'},{prop: '66',label: '6'},{prop: 'oprate',lable: ''}
])let tableData = ref([{name: 'Tom1',address: '上海',11: 11,22: 21,33: 31,44: 41,55: 51,66: 61,id: 1},{name: 'Tom2',address: '北京',11: 12,22: 22,33: 32,44: 42,55: 52,66: 62,id: 2},{name: 'Tom3',address: '广州',11: 13,22: 23,33: 33,44: 43,55: 53,66: 63,id: 3},{name: 'Tom4',address: '深圳',11: 14,22: 24,33: 34,44: 44,55: 54,66: 64,id: 4}
])let sortable;const tableHeader = ref(null);onMounted(() => {columnDrag(); // 初始化列拖拽事件})const headerCellClassName = ({column}) => { // 给序号和操作列增加类名,意在这两列不可进行拖拽if (column.label === '序号' || column.property === 'oprate') {return 'headerClassFilter'}}const columnDrag = () => {let el = tableHeader.value.$el.querySelector('.el-table__header-wrapper tr')Sortable.create(el, {animation: 180,delay: 0,filter: '.headerClassFilter', // 类名为headerClassFilter的列不可进行拖拽onMove({ related }) { // 移动单元格时,如果related.className包含headerClassFilter,即不可拖拽return related.className.indexOf('headerClassFilter') === -1;},onEnd(evt) {const oldItem = setColumns.value[evt.oldIndex]setColumns.value.splice(evt.oldIndex, 1);setColumns.value.splice(evt.newIndex, 0, oldItem);}})}</script><style scoped>.search-title{display: flex;/* justify-content: space-around; */}.search-titleName{color: #409EFF;}.search-icon{cursor: pointer;margin-top: 5px;margin-left: 10px;}:deep(.headerClassFilter){background-color: red !important;cursor: not-allowed;}:deep(.el-table .rowClassFilter){background-color: #ffeebc !important;cursor: not-allowed;}
</style>

行拖拽:

使用:row-class-name="rowClassName"对el-table的行增加rowClassFilter类名,有此类名的行不可进行拖拽(在Sortable.create实例中对rowClassFilter类名进行过滤,即filter绑定的类名)。

<template><div><el-table:data="tableData"borderscrollbar-always-onref="tableHeader"row-key="id":row-class-name="rowClassName"><template v-for="item in setColumns" :key="item.label"><!-- 操作列 --><el-table-columnv-if="item.prop === 'oprate'"fixed="right":prop="item.prop":label="item.label"><template #header><div class="search-title"><div :class="checked ? 'search-titleName' : ''">操作</div><el-icon class="search-icon" @click="search"><Search color="#409EFF" /></el-icon></div></template></el-table-column><!-- 序号列 --><el-table-columnv-else-if="item.prop === 'index'":type="item.type":label="item.label":width="item.width || 100"/><!-- 数据列 --><el-table-columnv-else:prop="item.prop":label="item.label":width="item.width || 100"/></template></el-table></div>
</template><script setup lang='js'>import { ref, watch, onMounted } from 'vue'import Sortable from 'sortablejs';let setColumns = ref([{prop: 'index',label: '序号',type: 'index'},{prop: 'name',label: '姓名'},{prop: 'address',label: '地址'},{prop: '11',label: '1'},{prop: '22',label: '2'},{prop: '33',label: '3'},{prop: '44',label: '4'},{prop: '55',label: '5'},{prop: '66',label: '6'},{prop: 'oprate',lable: ''}
])let tableData = ref([{name: 'Tom1',address: '上海',11: 11,22: 21,33: 31,44: 41,55: 51,66: 61,id: 1},{name: 'Tom2',address: '北京',11: 12,22: 22,33: 32,44: 42,55: 52,66: 62,id: 2},{name: 'Tom3',address: '广州',11: 13,22: 23,33: 33,44: 43,55: 53,66: 63,id: 3},{name: 'Tom4',address: '深圳',11: 14,22: 24,33: 34,44: 44,55: 54,66: 64,id: 4}
])let sortable;const tableHeader = ref(null);onMounted(() => {rowDrag() // 初始化行拖拽事件})const rowClassName = (data) => {if (data.rowIndex === 0 || data.rowIndex === tableData.value.length - 1) {return 'rowClassFilter'}}const rowDrag = () => {let el = tableHeader.value.$el.querySelector('.el-table__body-wrapper tbody')Sortable.create(el, {animation: 180,delay: 0,filter: '.rowClassFilter', // 类名为rowClassFilter的行不可进行拖拽onMove({related}) {return related.className.indexOf('rowClassFilter') === -1;},onEnd(evt) {const oldItem = tableData.value[evt.oldIndex]tableData.value.splice(evt.oldIndex, 1);tableData.value.splice(evt.newIndex, 0, oldItem);}})}
</script><style scoped>.search-title{display: flex;/* justify-content: space-around; */}.search-titleName{color: #409EFF;}.search-icon{cursor: pointer;margin-top: 5px;margin-left: 10px;}:deep(.headerClassFilter){background-color: red !important;cursor: not-allowed;}:deep(.el-table .rowClassFilter){background-color: #ffeebc !important;cursor: not-allowed;}
</style>

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

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

相关文章

Windows本地使用SSH连接VM虚拟机

WIN10 VM17.5 Ubuntu:20.04 1.网路设置 1)选择编辑->更改设置 配置完成 2.修改了服务器文件&#xff0c;修改sshd配置&#xff0c;在此文件下/etc/ssh/sshd_config&#xff0c;以下为比较重要的配置 PasswordAuthentication yes PermitRootLogin yes PubkeyAuthenticat…

如何优雅地中断一个网络请求

在前端开发中&#xff0c;网络请求无处不在。但有时候&#xff0c;由于各种原因&#xff08;如用户取消操作、页面跳转等&#xff09;&#xff0c;我们需要中断正在进行的网络请求&#xff08;本文只针对前端实现&#xff09;。那么&#xff0c;如何优雅地实现这一功能呢&#…

C++学习笔记“类和对象”:多态;

目录 4.7 多态 4.7.1 多态的基本概念 4.7.2 多态案例--计算器类 4.7.3 纯虚函数和抽象类 4.7.4 多态案例二 - 制作饮品 4.7.5 虚析构和纯虚析构 4.7.6 多态案例三-电脑组装 4.7 多态 4.7.1 多态的基本概念 多态是C面向对象三大特性之一 多态分为两类 静志多态: 函数…

apex触发器满足条件时弹出对话框

在Salesforce中&#xff0c;Apex触发器是在记录的数据库操作&#xff08;如插入、更新、删除&#xff09;之前或之后执行的逻辑。由于Apex触发器运行在服务器端&#xff0c;无法直接触发客户端&#xff08;浏览器&#xff09;上的对话框。不过可以通过以下方法间接实现这一需求…

[ue5]建模场景学习笔记(6)——必修内容可交互的地形,交互沙(4)

1.需求分析&#xff1a; 现在我们已经有了可以在世界内近于无限的跑动痕迹&#xff0c;现在需要对痕迹进行细化&#xff0c;包括例如当人物跳起时便不再绘制痕迹&#xff0c;以及痕迹应该存在深浅&#xff0c;应该由两只脚分别绘制&#xff0c;同时也应该对地面材质进行进一步处…

程序性能分析:工具与策略

在软件开发中&#xff0c;程序性能分析是一个至关重要的环节。无论是为了确保代码的正确性&#xff0c;还是为了提高程序的运行效率&#xff0c;性能分析都是不可或缺的。本文将介绍程序性能分析的策略以及一系列性能分析和内存检查工具。 一、性能分析的策略 先保证正确性&a…

Vue基本使用-02

上节我们讲了什么是mvvm模型&#xff0c;以及我们vue的一些常用指令&#xff0c;今天给大家讲一下vue的基本使用&#xff0c;在将之前我们需要重点讲解我们的一个指令&#xff0c;v-model指令 v-model v-model 可以在组件上使用以实现双向绑定,什么是双向绑定呢?意思就是当我们…

景芯SoC A72的时钟树分析

innovus的ctslog中的Clock DAG信息可以报出来CTS主要运行步骤的关键信息&#xff0c;比如clustering&#xff0c;balancing做完后的clock tree的长度&#xff0c;clock tree上所用的buffer、inverter&#xff0c;icg cell数量&#xff0c;clock skew等信息。我们以景芯SoC A72 …

wordpress站群搭建2代码初始化

海鸥技术下午茶-wordpress站群搭建2项目代码初始化 1.后端环境 项目框架使用 go-zore https://go-zero.dev/docs/tasks 集成了各种工程实践的 web 和 rpc 框架。含极简的 API 定义和生成工具 goctl&#xff0c;可以根据定义的 api 文件一键生成 Go。可以很大程度上提高开发效…

代码随想录算法训练营第三十六天|LeetCode56 合并区间、LeetCode738 单调递增的数字

题1&#xff1a; 指路&#xff1a;56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 思路与代码&#xff1a; 相似于昨天的引爆气球(第三题)&#xff0c;这个题的题意更为清晰。我们只要取有交集元素的并集区间即可&#xff0c;其他区间照常返回。同样&#xff0c;我们…

React Router 路由详解

文章目录 1. 安装 react-router-dom2. 创建路由3. 创建链接和导航4. 渲染路由参数和查询字符串 在React中&#xff0c;我们通常使用 react-router-dom 这个库来处理路由。 1. 安装 react-router-dom 首先&#xff0c;你需要安装 react-router-dom &#xff0c;可以使用 npm 或…

Centos离线安装Python3

目录 1.准备工作 2.解压python压缩包 3.编译 4.安装、更改环境变量 5.建立pip连接 使用的是Centos7服务器&#xff0c;Py版本是py3.9.0 1.准备工作 首先确保服务器中存在相关的编译器&#xff0c;例如GCC&#xff1b;这里不做过多叙述&#xff0c;需要者前往&#xff1a…

自动化压测工具开发(MFC)

1. 背景 为了减轻测试人员在进行MFC程序压力测试时的重复手动操作&#xff0c;本文档描述了开发一个自动化压力测试工具的过程。该工具能够根据程序界面某块区域的预定状态变化&#xff0c;自动执行鼠标点击或键盘输入操作。 2. 技术概览 串口控制&#xff1a;用于控制外部设…

空间搜索geohash概述;redis的geo命令

概述 通常在一些2C业务场景中会根据用户的位置来搜索一些内容。通常提供位置搜索的都是直接通过redis/mongodb/es等中间件实现的。 但是这些中间件又是怎么实现位置搜索的呢&#xff1b; 查了一番资料&#xff0c;发现背后一个公共的算法Geohash。 搜索的时候可以根据距离对…

Vitis HLS 学习笔记--移除内存分配malloc

目录 1. 简介 2. 示例解析 2.1 源码解释 2.2 malloc 分析 2.3 替代方案分析 3. 总结 1. 简介 Vitis HLS 也不支持动态创建或删除 C/C 对象&#xff08;用于综合&#xff09;。 本文探究如何在C/C代码中避免使用显式的malloc函数来分配内存。在硬件设计和FPGA开发中&…

Xcode无法使用设备:Failed to prepare the device for development

问题&#xff1a; Xcode无法使用设备开发&#xff0c;失败报错如下&#xff1a; Failed to prepare the device for development. This operation can fail if the version of the OS on the device is incompatible with the installed version of Xcode. You may also need…

致 粉丝de信

致 粉丝 -本文呢看不下去别看&#xff0c;但是学业是真的重要&#xff08;平常有信奥&#x1f62b;&#xff09;&#xff0c;电脑没收……更新可能得到暑假&#xff0c; 同学&#xff1a;小没苯agoe &#xff08;aaa&#xff0c;学霸&#xff01;&#xff01;&#xff01;&…

GGML简单介绍

GGML是一个用于机器学习的张量库&#xff0c;可以在商用硬件上实现大型模型和高性能。它被llama.cpp和whisper.cpp使用 C语言编写 16位浮点支撑 整数量化支持(如4位、5位、8位) 自动分化 内置优化算法(如ADAM, L-BFGS) 针对苹果芯片进行优化 在x86架构上利用AVX / AVX2的内在特…

A股上市公司MSCI ESG评级面板数据(2017-2023)

数据简介&#xff1a;MSCI ESG&#xff08;Environmental, Social, and Governance&#xff09;评级是由 MSCI Inc. 提供的一项服务&#xff0c;旨在评估公司在环境、社会和治理方面的表现。MSCI 是一家全球领先的投资研究和指数提供商&#xff0c;其 ESG 评级被广泛用于评估企…

C++ Primer 第五版 第16章 模板与泛型编程

模板是C中泛型编程的基础。一个模板就是一个创建类或函数的蓝图或者说公式。当使用一个vector这样的泛型类型&#xff0c;或者find这样的泛型函数时&#xff0c;我们提供足够的信息&#xff0c;将蓝图转换为特定的类或函数。这种转换发生在编译时。 一、定义模板 1. 函数模板…