当前位置: 首页 > news >正文

< elementUi 组件插件: el-table表格拖拽修改列宽及行高 及 使用注意事项 >

在这里插入图片描述

elementUi 组件插件: el-table拖拽修改列宽及行高 及 使用注意事项

  • 👉 资源Js包下载及说明
  • 👉 使用教程
    • > 实现原理
    • > 局部引入
    • > 全局引入 (在main.js中)
  • 👉 注意事项
  • 往期内容 💨


👉 资源Js包下载及说明

由于项目需求,需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源,出一期 “ 使用事项 ” 及 使用过程中的问题汇总

> > 点击跳转资源下载 < <

👉 使用教程

由于是后期加的功能,相信大部分人都不太可能去动原先的组件。所以这个插件正好符合需求,全部代码基于原生js,不依赖任何插件,可以直接声明使用。

> 实现原理

  • 列宽的调整最终是通过调整如上图的col元素的width属性实现列宽调整的。

  • 行高的调整是动态改变tbodyel-table__row 的高度实现调整的。

注意事项:
由于是直接引用的Js文件,代码内容是针对提前预设获取dom标签,给其增加事件监听。因此,是针对当前引入页面的所有表格都有效,如需要只针对某个表格,可以在查找元素的地方传参进行判断。判断代码如下:

 const ths = document.querySelectorAll('.el-table__header th')const tBodyTr = document.querySelectorAll('.el-table__body tbody')const tbodys = document.querySelectorAll('.el-table__body-wrapper')

> 局部引入

import resizeTable from "@/utils/tabelleAnpassen";// 调用方法
mounted() {this.$nextTick(() => {resizeTable();});
}

> 全局引入 (在main.js中)

import resizeTable from "@/utils/tabelleAnpassen";// 挂载在vue的原型上
Vue.prototype.$resizeTable = resizeTable;// 在需要使用的地方,调用方法
this.$nextTick(() => {this.$resizeTable();
});

以上这些使用方法,得根据实际情况来判断。判断调用方法的位置放在那个位置合适,以及有没有那种情况会导致插件失效,需要重现调用的情况。

👉 注意事项

在开发中,我们的表格往往不是一成不变的,可能会使用element表格的其他属性,或者是通过Vue指令对其造成影响。 接下来,一一讲解出现的问题及解决方案:

  • v-if 指令 包裹列表的情况下: 由于v-if会使表格出现一个重载的过程,从销毁到重现挂载。 会导致我们之前在调用这个方法的时候,获取到的dom失效,从而使插件代码无法确定表格是否存在,导致代码失效。
  • v-for 指令实现动态表头的情况下,由于 v-for 指令需要动态根据不同的数据渲染不同的表头, 也对插件获取表格具体的列数有影响,影响情况也和上面的 “ v-if ” 差不多的原因。 所以也需要在表头渲染完毕后,重现调用一下插件方法。

解决方案:v-if / v-for 的判断条件加上一个监听事件(watch),在其变化后(也就是重现挂载后),重现调用我们引入的插件方法。

  • el-table-column 上的 show-overflow-tooltip 属性,导致内容无法跟随列宽变化而变化。主要原因是因为加上该属性后,列表表格中的内容外面都嵌套了一层 .cell 的 div 且这个div的宽度跟随一开始列表预设的宽度一致,导致外面那层表格宽度变化,里面还是显示预设的宽度样式。

解决方案: 在全局中,设置样式覆盖其原先的宽度样式

.el-table .cell.el-tooltip {width: auto !important;
}

> 补充在搜狗浏览器中表格错位问题解决

// 关键css代码
.el-table__header colgroup col[name="gutter"] {display: table-cell !important;
}

具体操作,需要视具体情况而定,原因都差不多,主要是看插件能否正常获取到表格标签。

还有需要注意的是,初次调用情况的思考,比如现在vue项目用的比较多的是单页面应用项目,需要在index页面中,增加 router 路由监听器 及 mounted生命周期 的插件调用,当 路由跳转 / 刷新 时触发插件函数,就能做到全局覆盖。


往期内容 💨

🔥 < 每日小技巧:N个很棒的 Vue 开发技巧, 持续记录ing >

🔥 < CSDN周赛解析:第 27 期 >

🔥 < 每日算法 - JavaScript解析:二叉树灯饰【初识动态规划 - dp, 具体理解配合代码看最合适,代码均有注释】 >

🔥 < JavaScript技术分享: 大文件切片上传 及 断点续传思路 >

相关文章:

< elementUi 组件插件: el-table表格拖拽修改列宽及行高 及 使用注意事项 >

elementUi 组件插件&#xff1a; el-table拖拽修改列宽及行高 及 使用注意事项&#x1f449; 资源Js包下载及说明&#x1f449; 使用教程> 实现原理> 局部引入> 全局引入 &#xff08;在main.js中&#xff09;&#x1f449; 注意事项往期内容 &#x1f4a8;&#x1f4…...

微信小程序的分享朋友圈

分享朋友圈官方API&#xff1a;分享到朋友圈 1、分享到朋友圈接口设置事项&#xff1a; 2、onShareTimeline()注意事项&#xff1a; 3、分享朋友圈后&#xff0c;测试发现&#xff0c;没有数据请求。 用户在朋友圈打开分享的小程序页面&#xff0c;并不会真正打开小程序&…...

华为OD机试真题Python实现【 寻找路径】真题+解题思路+代码(20222023)

寻找路径 题目 二叉树也可以用数组来存储,给定一个数组,树的根节点的值储存在下标 1, 对于储存在下标 n 的节点,他的左子节点和右子节点分别储存在下标 2*n 和 2*n+1, 并且我们用 -1 代表一个节点为空。 给定一个数组存储的二叉树,试求从根节点到最小的叶子节点的路径,…...

九头蛇hydra爆破http示例

使用hydra执行http表单暴力破解 通过浏览器自带分析得知: 提交地址:http://10.0.0.115/student_attendance/ajax.php?action=login 提交方式:POST 提交数据:username=a&password=a 服务响应:3 根据以上收集的信息就可以使用hydra进行密码爆破 hydra 10.0.0.115 http…...

jQuery基本使用

获取和设置元素内容学习目标能够知道获取和设置元素内容的操作1. html方法的使用jquery中的html方法可以获取和设置标签的html内容示例代码:<script>$(function(){var $div $("#div1");// 获取标签的html内容var result $div.html();alert(result);// 设置…...

互联网企业如何进行数字化转型?业务需求迭代频繁的应对之策!

互联网行业作为我国数字经济发展“四化”框架中生产力主要组成部分&#xff0c;是国家数字化转型的主要推动者之一。为此&#xff0c;相对于其他传统行业来说&#xff0c;互联网行业企业数字化转型的紧迫程度更高&#xff0c;如果不数字化转型或者转型不成功&#xff0c;会有更…...

前端学习日记——Vue之Vuex初识(一)

前言 学习前端一段时间了&#xff0c;因为一直是做Python开发&#xff0c;所以凭借着语言的通性学习Javascript、Vue轻快很多&#xff0c;但一些碎片化的知识及插件的使用方法还是需要记录一下&#xff0c;时而复习&#xff0c;形成系统化的知识体系&#xff08;PS&#xff1a;…...

【C++】Windows动态库【.DLL文件】制作方法总结

如题&#xff0c;我们本篇介绍如何制作DLL&#xff0c;将代码类中的方法以接口的形式暴露出来给exe程序使用。会涉及类厂创建方法实例、声明DLL接口、.def文件的使用等。 目录 一、DLL介绍 二、C制作DLL文件 2.1 DLL端 2.2 调用端 三、DLL导出类方法 四、COM技术制作DLL…...

C 语言编程 — HelloWorld

目录 文章目录目录安装 Linux GCC 编译器YUM 安装发行版本编译安装指定版本HelloWorld基本语法编码运行安装 Linux GCC 编译器 YUM 安装发行版本 $ yum install gcc vim -y$ gcc --version gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-39) Copyright © 2015 Free Software…...

蓝桥杯入门即劝退(二十一)三数之和(梦破碎的地方)

欢迎关注点赞评论&#xff0c;共同学习&#xff0c;共同进步&#xff01;------持续更新蓝桥杯入门系列算法实例--------如果你也喜欢Java和算法&#xff0c;欢迎订阅专栏共同学习交流&#xff01;你的点赞、关注、评论、是我创作的动力&#xff01;-------希望我的文章对你有所…...

element 下拉框支持搜索并输入

前言 下拉框对于开发来说再常见不过了&#xff0c;也是界面设计中的常用组件&#xff0c;在部分使用场景下&#xff0c;我们需要做到下拉框可以选择的同时&#xff0c;支持搜素和输入&#xff0c;以 element 的下拉框组件为例&#xff0c;当我们同时设置属性让其支持搜素和输入…...

JVM详解——垃圾回收

如果有兴趣了解更多相关内容的话&#xff0c;可以看看我的个人网站&#xff1a;耶瞳空间 GC&#xff1a;垃圾收集(Gabage Collection)&#xff0c;内存处理是编程人员容易出现问题的地方&#xff0c;忘记或者错误的内存。不当的回收可能会导致程序或系统的不稳定甚至崩溃&…...

spring之集成Mybatis

文章目录一、实现步骤1、准备数据库表2、在IDEA中创建一个模块&#xff0c;并引入依赖3、基于三层架构实现4、编写pojo5、编写mapper接口6、编写mapper配置文件7、编写service接口和service接口的实现类8、编写jdbc.properties配置文件9、编写mybatis-config.xml配置文件10、编…...

【面试宝典】准备面试了~集合

1、ArrayList和linkedList的区别 它们都是继承自 Collection。 ArrayList 是基于数组的&#xff0c;在使用查询的时候效率比较高&#xff0c;但删除效率却非常低&#xff0c;因为它需要重新排数组中的所有数据。 LinkList底层是一个双链表&#xff0c;在添加和删除元素时更好…...

华为OD机试真题Python实现【GPU 调度】真题+解题思路+代码(20222023)

GPU 调度 题目 为了充分发挥 GPU 算力, 需要尽可能多的将任务交给 GPU 执行, 现在有一个任务数组, 数组元素表示在这1s内新增的任务个数, 且每秒都有新增任务, 假设 GPU 最多一次执行n个任务, 一次执行耗时1s, 在保证 GPU 不空闲的情况下,最少需要多长时间执行完成。…...

gcc编译C源程序

一、安装 在Linux下&#xff0c;一般使用gcc或arm-linux-gcc交叉编译器来编译程序。在Ubuntu环境下&#xff0c;我们可以使用以下apt-get命令来安装这些编译程序。 apt-get install gcc apt-get install gcc-arm-linux-gnueabi 安装完毕后&#xff0c;使用以下命令查看编译器…...

Tina_Linux_各平台多媒体格式_支持列表_new

Tina Linux 各平台多媒体格式支持列表 1 概述 1.1 编写目的 本文档将介绍Allwinner Tina Linux 系统各个芯片平台支持的多媒体格式&#xff0c;旨在帮助软件开发工程师、技术支持工程师查找各芯片平台支持哪些多媒体格式。 1.2 适用范围 Tina Linux v3.5 及以上版本。 1.…...

归并排序及其应用

归并排序算法基于分而治之的概念&#xff0c;具体来说就是遍历一棵树&#xff0c;归并的过程是一个后序执行的动作。 由于我们知道每个子部分在合并后都是有序的&#xff0c;我们可以利用这个特性来解决一些问题。 上图可视化了merge sort algorithm的过程&#xff0c;我们很容…...

【PAT甲级题解记录】1007 Maximum Subsequence Sum (25 分)

【PAT甲级题解记录】1007 Maximum Subsequence Sum (25 分) 前言 Problem&#xff1a;1007 Maximum Subsequence Sum (25 分) Tags&#xff1a;DP Difficulty&#xff1a;剧情模式 想流点汗 想流点血 死而无憾 Address&#xff1a;1007 Maximum Subsequence Sum (25 分) 问题描…...

华为OD机试真题Python实现【 最小叶子节点】真题+解题思路+代码(20222023)

最小叶子节点 题目 二叉树也可以用数组来存储, 给定一个数组,树的根节点的值储存在下标1, 对于储存在下标n的节点,他的左子节点和右子节点分别储存在下标2*n和2*n+1, 并且我们用-1代表一个节点为空, 给定一个数组存储的二叉树, 试求从根节点到最小的叶子节点的路径, …...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...