vue中使用jquery 实现table 拖动改变尺寸
使用 CDN , 降低打包文件的大小在index.html中 <script src="https://.../cdns/jquery-1.12.4.min.js"></script>
在 Vue 中使用 jQuery
一旦你引入 jQuery,你可以在 Vue 实例中使用它。有两种主要方式:
1. 使用全局变量 $
jQuery 会自动在全局范围内添加 $ 变量。你可以在 Vue 实例中直接使用 $ 来访问 jQuery 的 API。
例如:
// html 中
// <div id="jq666" ></div>// vue中
mounted() {// 使用 `this.$` 来查找元素 const el = $('#jq666');el.text(" 这是用 jquery 添加的新的内容")el.css("color","green");el.css("padding","36px");el.css({"background-color":"yellow","font-size":"36px"});
}
2. 使用 this.$
Vue 实例有一个特殊的属性 this.$,它可以用于访问 jQuery。
例如:
mounted() { // 使用 `this.$` 来查找元素 const element = this.$(selector); // 对元素进行操作 element.hide();
}
提示
- 请确保在项目中只引入一次 jQuery。
- jQuery 会修改全局作用域,所以谨慎使用 $ 变量。
- 考虑使用 Vue.js 本身的特性,而不是过度依赖 jQuery。
使用 colResizable 表格拖动改变列宽index.html
<script src="https://.../cdns/jquerys/colResizable-1.6.min.js"></script>
<!-- test.html -->
<div> <div id="jq666"></div><div class="table"><!--不用 id="tb666" --><table ref="tb777" cellspacing="0" border="0" cellpadding="0"><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th><th>表头4</th><th>表头5</th></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td>我的高度不固定我的高度不固定我的高度不固定我的高度不固定我的高度不固定我的高度不固定</td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div>
</div>
<!-- test.vue -->
<template src='./test.html'></template>
<style>
.table {overflow: auto;width: 400px;height: 300px;/* 固定高度 */border: 1px solid #999;border-bottom: 0;border-right: 0;
}
table {border-collapse: separate;table-layout: fixed;width: 100%;/* 固定寬度 */
}
td,
th {border-right: 1px solid #999;border-bottom: 1px solid #999;box-sizing: border-box;/* 单元格宽高 */width: 100px;height: 30px;
}
th {background-color: lightblue;
}
/* 控制左边固定的核心代码 */
td:nth-child(1),
th:nth-child(1) {position: sticky;left: 0;/* 首行在左 */z-index: 1;background-color: lightpink;
}
td:nth-child(2),
th:nth-child(2) {position: sticky;left: 100px;z-index: 1;background-color: lightpink;
}
/* 控制表头固定的核心代码 */
thead tr th {position: sticky;top: 0;/* 第一列最上 */
}
th:nth-child(1),
th:nth-child(2) {z-index: 2;background-color: lightblue;
}
</style>
<script>
export default {name: "test",data() {return { };},methods: { },mounted() {// 使用 `this.$` 来查找元素 const el = $('#jq666');el.text(" 这是用 jquery 添加的新的内容")el.css("color", "green");el.css("padding", "36px");el.css({ "background-color": "yellow", "font-size": "36px" });// let tb = $("#tb666") // 这个当然可以let tb = $(this.$refs.tb777) //这样才有效!!!!!//此处实现表格可拖动改变尺寸 tb.colResizable({liveDrag: true,//实现实时拖动,可看见拖动轨迹draggingClass: "dragging", //防止拖动出险虚标线});}
};
</script>
http://www.bacubacu.com/colresizable/#rangeSlider colResizable下载地址
table{ table-layout:fixed;/* 需要为fixed */
}相关文章:
vue中使用jquery 实现table 拖动改变尺寸
使用 CDN , 降低打包文件的大小在index.html中 <script src"https://.../cdns/jquery-1.12.4.min.js"></script>在 Vue 中使用 jQuery 一旦你引入 jQuery,你可以在 Vue 实例中使用它。有两种主要方式: 1. 使用全局变量 $ jQue…...
使用ensp进行ppp协议综合实验
实验拓扑 实验划分 AR1的Serial3/0/0接口:192.168.1.1/24; AR2的Serial3/0/0接口:192.168.1.2/24; AR2的Serial3/0/1和4/0/0的聚合接口:192.168.2.2/24; AR3的Serial3/0/0和3/0/1的聚合接口:192…...
什么是AGI
AGI(Artificial General Intelligence,人工通用智能)是指具备与人类相当或超越人类水平的通用智能的人工智能系统。与当前主流的**狭义人工智能(Narrow AI)**不同,AGI 能够像人类一样灵活地处理各种任务&am…...
RabbitMQ模块新增消息转换器
文章目录 1.目录结构2.代码1.pom.xml 排除logging2.RabbitMQConfig.java3.RabbitMQAutoConfiguration.java 1.目录结构 2.代码 1.pom.xml 排除logging <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/PO…...
验证二叉搜索树(力扣98)
根据二叉搜索树的特性,我们使用中序遍历,保证节点按从小到大的顺序遍历。既然要验证,就是看在中序遍历的条件下,各个节点的大小关系是否符合二叉搜索树的特性。双指针法和适合解决这个问题,一个指针指向当前节点&#…...
vue3 vue2区别
Vue 3 和 Vue 2 之间存在多个方面的区别,以下是一些主要的差异点: 1. 性能改进 Vue 3:在性能上有显著提升,包括更小的包体积、更快的渲染速度和更好的内存管理。Vue 2:性能相对较低,尤其是在大型应用中。…...
IOS 自定义代理协议Delegate
QuestionViewCell.h文件代码,定义代理协议 protocol QuestionViewCellDelegate <NSObject>- (void)cellIsOpenDidChangeAtIndexPath:(NSIndexPath *)indexPath;endinterface QuestionViewCell : UITableViewCellproperty (nonatomic, weak) id<QuestionVi…...
消息队列篇--扩展篇--码表及编码解码(理解字符字节和二进制,了解ASCII和Unicode,了解UTF-8和UTF-16,了解字符和二进制等具体转化过程等)
1、理解字符,int,字节以及二进制存储 (1)、字符 字符是文本的基本单位,例如字母(A, B, C)、数字(1, 2, 3)、标点符号(!, ?, ,)以及其他符号&am…...
2024年度总结——理想的风,吹进现实
2024年悄然过去,留下了太多美好的回忆,不得不感慨一声时间过得真快啊!旧年风雪尽,新岁星河明。写下这篇博客,记录我独一无二的2024年。这一年,理想的风终于吹进现实! 如果用一句话总结这一年&am…...
代码工艺:实践 Spring Boot TDD 测试驱动开发
TDD 的核心理念是 “先写测试,再写功能”,其过程遵循一个严格的循环,即 Red-Green-Refactor: TDD 的流程 1. Red(编写失败的测试) 根据需求,先编写一个测试用例,描述期望的行为。…...
深度学习|表示学习|卷积神经网络|通道 channel 是什么?|05
如是我闻: 在卷积神经网络(CNN)中,channel(通道) 是指输入或输出数据的深度维度,通常用来表示输入或输出的特征类型。 通道的含义 输入通道(Input Channels):…...
PCDN的虚拟机与云主机区别
使用虚拟机和云主机运行PCDN(P2P CDN)时,主要存在以下区别: 一、资源分配与灵活性 虚拟机: 资源受限:虚拟机运行在物理服务器上,其资源(如CPU、内存、带宽)受到物理服务…...
计算机网络 (57)改进“尽最大努力交付”的服务
前言 计算机网络中的“尽最大努力交付”服务是网络层的一种数据传输方式。这种服务的特点是网络层只负责尽力将数据报从源端传输到目的端,而不保证数据传输的可靠性。 一、标记与分类 为数据分组打上标记: 给不同性质的分组打上不同的标记&#x…...
Redis 详解
简介 Redis 的全称是 Remote Dictionary Server,它是一个基于内存的 NoSQL(非关系型)数据库,数据以 键值对 存储,支持各种复杂的数据结构 为什么会出现 Redis? Redis 的出现是为了弥补传统数据库在高性能…...
如何解压rar格式文件?8种方法(Win/Mac/手机/网页端)
RAR 文件是一种常见的压缩文件格式,由尤金・罗谢尔(Eugene Roshal)开发,因其扩展名 “rar” 而得名。它通过特定算法将一个或多个文件、文件夹进行压缩,大幅减小存储空间,方便数据传输与备份。然而…...
网络仿真工具Core环境搭建
目录 安装依赖包 源码下载 Core安装 FAQ 下载源码TLS出错误 问题 解决方案 找不到dbus-launch 问题 解决方案 安装依赖包 调用以下命令安装依赖包 apt-get install -y ca-certificates git sudo wget tzdata libpcap-dev libpcre3-dev \ libprotobuf-dev libxml2-de…...
Coze插件开发之基于已有服务创建并上架到扣子商店
Coze插件开发之基于已有服务创建并上架到扣子商店 在应用开发中,需要调用各种插件,以快速进行开发。但有时需要调用的插件在扣子商店里没有,那怎么办呢? 今天就来带大家快速基于已有服务创建一个新的插件 简单来讲,就是…...
ORACLE-主备备-Failover
背景 随着业务的不断增涨,至使现有的单节点DG环境的连接已经无法满足当前业务需求,并且随着业务的重要性,同时也要求数据库的高可用性,减少数据库故障对业务的影响。于是规划迁移方案。 迁移方案如下: 因PRIMARY库本地磁盘空间已达到80%决定弃用,搭建高可用2个节点的RAC做…...
wampserver + phpstrom 调试配置
step 1 点击任务栏wampserver图标->php->php.ini[apache module] 在文件最后面,确保这些值被定义且跟以下的一样 xdebug.mode debug xdebug.start_with_request yes xdebug.client_port 9003 xdebug.client_host 127.0.0.1step 2 按如下配置 step3 下断点,运行即…...
Java Web-Cookie与Session
会话跟踪技术 会话跟踪技术是一种在 Web 应用程序中跟踪用户会话状态的机制,它允许服务器在多个请求之间识别和关联属于同一用户的请求,以便在整个会话过程中保持用户相关的信息。以下是几种常见的会话跟踪技术: Cookie 概念:Cook…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...
