vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案

项目使用 element ui 的表格实现拖动表头可改变列的宽度,又使用sortablejs实现表格的列可拖拽到其他列的位置,导致出现如下的一些问题:

1、某一列宽变大或变小后,只有当前列可拖拽,其他列无法拖拽。

解决方案:在列宽发生改变后,销毁当前拖拽实例,再重新创建拖拽实例。

this.sortDemo.destroy()

此方法可查看sortablejs官网 Sortable.js中文网

2、当表格没有横向滚动条时,某一列宽变大或变小时,其他列宽也会变大或变小。

根因:表格的每一列设置了min-width,当表格没有横向滚动条时,某一列宽变大或变小时,min-width 会把剩余宽度按比例分配给设置了 min-width 的列,这样才可以撑开表格的整体宽度。

结论:当表格有横向滚动条时就不会出现这个问题。

3、当表格没有数据时,列不可以拖拽,改变列宽后可拖拽。

解决方案:表格数据更新后,不管表格数据接口有没有返回数据,都需重新挂载拖拽监听事件,才可以拖拽列。

this.reDrawTable()

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

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

相关文章

软通动力与华秋达成生态共创合作,共同推动物联网硬件创新

7月11日,在2023慕尼黑上海电子展现场,软通动力信息技术(集团)股份有限公司(以下简称“软通动力”)与深圳华秋电子有限公司(以下简称“华秋”)签署了生态共创战略合作协议,共同推动物联网硬件生态繁荣发展。当前双方主要基于软通动力的产品及解…

【Python基础函数笔记】获取当前时间并写入日志

1.获取当前时间 import os from datetime import datetime import pytzdef get_cur_time():# 获取当前时间return datetime.strftime(datetime.now(pytz.timezone(Asia/Singapore)), %Y-%m-%d_%H-%M-%S)# 基础目录 basedir a logdir os.path.join(basedir, logs, str(args.n…

docker push镜像到自己的hub仓库

注册docker hub的账户 https://hub.docker.com/建立自己的仓库在终端执行 docker login给想要推送的镜像打标签 docker tag localimage:tag iamajdocker(账号名)/myrepository(仓库名):tag(dockerhub上显示的镜像名)例如: hub用户名为xx,在hub建立的仓库名为evmos…

Spring Cloud—GateWay之限流

RequestRateLimiter RequestRateLimiter GatewayFilter 工厂使用 RateLimiter 实现来确定是否允许当前请求继续进行。如果不允许,就会返回 HTTP 429 - Too Many Requests(默认)的状态。 这个过滤器需要一个可选的 keyResolver 参数和特定于…

pyqt 简单案例

一、空白的widget窗口 import sys from PyQt5 import QtWidgets,QtCoreapp QtWidgets.QApplication(sys.argv) widget QtWidgets.QWidget() widget.resize(360,360) widget.setWindowTitle("helloword") widget.show() sys.exit(app.exec_()) 需要引入sys模块&…

docker - 将tar包加载成镜像

这部分, 先从这篇开始吧, 然后根据相关工作顺序再慢慢介绍~ 介绍: 一般构建我们自己的镜像有很多方式, 这里介绍根据tar包进行构建镜像images. 用法: 加载镜像的tar包, 在服务器生成对应的镜像images: sudo docker load -i /home/xxx/tar_name.tar参数介绍: /home/xxx/ta…

STL源码刨析_stack _queue

目录 一. 介绍 1. stack 介绍 2. queue 介绍 二. 模拟实现 1. stack 模拟实现 2. queue 模拟实现 三. deque 1. deque 接口 2. 底层 一. 介绍 1. stack 介绍 stack(栈)是一种容器适配器,它提供了一种后进先出(LIFO&#xff0…

VMware安装Ubuntu(VMware版本17-Ubuntu版本16.0)

VMware安装Ubuntu(VMware版本17-Ubuntu版本16.0) 一,VMware虚拟机下载官网点击https://customerconnect.vmware.com/cn/downloads/info/slug/desktop_end_user_computing/vmware_workstation_pro/17_0 二,Ubuntu乌班图下载官网点…

VB旅游资源及线路管理系统的设计与实现

旅游作为一个新兴的产业近年来取得了迅速的发展,旅行社如雨后春笋遍布全国各省市、目前旅游行业普遍存在着企业规模小,管理不规范等弱点。因为旅游涉及吃、住、行、游、购、娱等诸多要素,而且这些要素又分散在不同的地域中,一个人不可能全面掌握所有的信息。一旦掌握某方面…

会议OA项目之会议发布(多功能下拉框的详解)

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.主要功能点介绍 二.效果展示 三.前…

[极客大挑战 2019]PHP(反序列化)

介绍说明&#xff0c;有备份的习惯&#xff0c;找常见的备份文件后缀名 使用dirsearch进行扫描 dirsearch -u http://f64378a5-a3e0-4dbb-83a3-990bb9e19901.node4.buuoj.cn:81/ -e php-e 指定网站语言 扫描出现&#xff0c;www.zip文件 查看index.php <?php include c…

ES(3)映射关系

文章目录 创建映射关系更具映射关系创建数据查询有什么区别呢&#xff1f; 创建映射关系 创建mapping映射类似于我们创建表结构&#xff0c;规定字段什么类型&#xff0c;多长等基本信息。 先创建 索引 PUT http://127.0.0.1:9200/user 然后创建映射关系 PUT http://127.0.…

[运维] 生成nginx 自签名ssl证书

系统说明 Ubuntu 22.04 STL 服务器版 生成证书 要生成 Nginx SSL 证书&#xff0c;你可以使用 OpenSSL 工具。按照以下步骤操作&#xff1a; 安装 OpenSSL&#xff1a; 如果你的系统上还没有安装 OpenSSL&#xff0c;请使用以下命令安装它&#xff1a; sudo apt update su…

C++-----vector

本期我们来学习C中的vector&#xff0c;因为有string的基础&#xff0c;所以我们会讲解的快一点 目录 vector介绍 vector常用接口 构造函数 sort 迭代器 size&#xff0c;max_size&#xff0c;capacity&#xff0c;empty reserve和resize front和back data insert和…

MATLAB 基于CPD的点云配准 (24)

MATLAB 基于CPD的点云配准 (24) 一、算法简介二、具体使用1.代码(注释详细)2.函数介绍3.使用技巧4.重复叠加配准效果如何一、算法简介 MATLAB 中包含了一种基于CPD的点云配准方法,这里对其进行使用,查看其配准效果,结果来看如上图所示,还是可用的。 二、具体使用 1.代…

快7月底了,让我康康有多少准备跳槽的

前两天跟朋友感慨&#xff0c;今年的铜三铁四、裁员、疫情影响导致好多人都没拿到offer!现在已经快7月底了&#xff0c;具体金九银十只剩下2个月。 对于想跳槽的职场人来说&#xff0c;绝对要从现在开始做准备了。这时候&#xff0c;很多高薪技术岗、管理岗的缺口和市场需求也…

ElasticSearch 数据迁移工具elasticdump

ElasticSearch 数据迁移工具elasticdump Elasticdump 是一个用于导入和导出 Elasticsearch 数据的命令行工具。它提供了一种方便的方式来在不同的 Elasticsearch 实例之间传输数据&#xff0c;或者进行数据备份和恢复。 使用 Elasticdump&#xff0c;你可以将 Elasticsearch …

allure环境搭建

allure环境搭建 在搭建之前你应该有python、pycharm allure介绍 官网&#xff1a;https://docs.qameta.io/allure/ 英文介绍 Allure Framework is a flexible lightweight multi-language test report tool that not only shows a very concise representation of what have…

关于allure和pycharm的运行模式

案例 新建一个项目allure_mode 新建一个python代码test_allure_001.py 代码如下 import pytest, os def test_001(): assert 1 1 if __name__ __main__: pytest.main([-sv, __file__, --alluredir, ./html, --clean-alluredir]) os.system(fallure se…

【异常解决】postman请求提示Full authentication is required to access this resource

Full authentication is required to access this resource解决办法 报错问题&#xff1a;在使用 postman 测试接口时&#xff0c;该接口需要在 Header 中传入 access_token&#xff0c;实际上也在请求的 Header 中添加上了 access_token 参数&#xff0c;但是服务端还是返回4…