el-table自适应缩放大小

安装依赖

npm install --save vue-draggable-resizable
//或
cnpm install --save vue-draggable-resizable

main.js引入依赖

import VueDraggableResizable from 'vue-draggable-resizable'
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
Vue.component('vue-draggable-resizable', VueDraggableResizable)

在这里插入图片描述
demo:


<template><vue-draggable-resizable:h="height":w="width"@resizing="handleResize"><el-table:data="tableData"height="100%"borderstyle="width: 100%"><el-table-columnlabel="日期"prop="date":show-overflow-tooltip="true"></el-table-column><el-table-columnlabel="姓名"prop="name":show-overflow-tooltip="true"></el-table-column><el-table-columnlabel="地址"prop="address":show-overflow-tooltip="true"></el-table-column></el-table></vue-draggable-resizable>
</template><script>
export default {data() {return {width: 300,height: 300,tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄"},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄"},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄"}]};},methods: {handleResize(left, top, width, height) {this.height = height;}}
};
</script>

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

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

相关文章

基于Redis实现全局唯一Id

微信公众号访问地址&#xff1a;基于Redis实现全局唯一Id 推荐文章&#xff1a; 1、使用原生Redis命令实现分布式锁 ​ 2、为什么引入Redisson分布式锁&#xff1f; 3、SpringBoot整合多数据源&#xff0c;并支持动态新增与切换&#xff08;详细教程&#xff09; 4、Sprin…

JVM 查看配置 jinfo 及使用 jstat,查看堆栈jstack及GC

1. Jinfo 查看正在运行的Java应用程序的扩展参数: 包含 JVM 参数与 java 系统参数 命令&#xff1a; jinfo pid 2 jstat 查看堆内存使用情况及 GC 回收频率等&#xff1a; jstat [-命令选项] [vmid] [间隔时间(毫秒)] [查询次数] 2.1 jstat -gc pid 最常用&#xff0c;可…

C语言必会题目(2)

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 今天继续分享C语言必会的题目&#xff0c;上一篇文章主要是一些选择题&#xff0c;而今天我们主要内容为编程题的推荐与讲解 准备好迎接下面的题了吗&#xff1f;开始发车了&#xff01;&#xff01;&#xff01; 输入…

OSI参考模型及TCP/IP协议栈

一、网络概述 1.1、什么是网络&#xff1f; 1、网络的本质就是实现资源共享 2、将各个系统联系到一起&#xff0c;形成信息传递、接收、共享的信息交互平台 1.2、典型的园区网拓扑 1.3、网络历史发展&#xff0c;ARPA和ARPANET 1、1969年&#xff0c;美国国防部高级研究计…

前后端分离------后端创建笔记(03)前后端对接(下)

本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论&#xff0c;如有侵权请联系 源码&#xff1a;https://gitee.com/green_vegetables/x-admin-project.git 素材&#xff1a;https://pan.baidu.com/s/…

数据结构--栈和队列3.1(栈-顺序结构)

目录 栈&#xff08;Stack&#xff09;栈顶&#xff08;top&#xff09;栈底&#xff08;bottom&#xff09;空栈&#xff08;不含任何元素&#xff09; 创建栈 入栈操作 出栈操作 销毁一个栈 计算栈的当前容量 实例分析 栈的插入操作叫做进栈&#xff08;Push&#xf…

基于Mybatis Plus的SQL输出拦截器。完美的输出打印 SQL 及执行时长、statement

我们需要想办法打印出完成的SQL&#xff0c;Mybatis为我们提供了 org.apache.ibatis.plugin.Interceptor接口&#xff0c;我们来实现该接口做一些打印SQL的工作 package org.springjmis.core.mp.plugins;import com.baomidou.mybatisplus.core.toolkit.CollectionUtils; impor…

创新零售,京东重新答题?

继新一轮组织架构调整后&#xff0c;京东从低价到下沉动作不断。 新成立的创新零售部在京东老将闫小兵的带领下悄然完成了整合。近日&#xff0c;京喜拼拼已改名为京东拼拼&#xff0c;与七鲜、前置仓等业务共同承载起京东线上线下加速融合的梦想。 同时&#xff0c;拼拼的更…

【从零学习python 】19. 循环遍历列表和列表嵌套的应用

文章目录 列表的循环遍历1. 使用while循环2. 使用for循环3. 交换2个变量的值1. 列表嵌套2. 应用 进阶案例 列表的循环遍历 1. 使用while循环 为了更有效率的输出列表的每个数据&#xff0c;可以使用循环来完成 namesList [xiaoWang,xiaoZhang,xiaoHua] length len(namesLi…

零售行业供应链管理核心KPI指标(一) – 能力、速度、效率和成本

有关零售行业供应链管理KPI指标的综合性分享&#xff0c;涉及到供应链能力、速度、效率和成本总共九大指标&#xff0c;是一个大框架&#xff0c;比较核心也比较综合。 衡量消费品零售企业供应链管理效率和水平的核心KPI通常有哪些&#xff1f; 图片来源-派可数据&#xff08;…

C++ unique_ptr概述 常用操作

文章目录 unique_ptr概述unique_ptr常用操作 unique_ptr概述 uniue_ptr是一个独占式的指针,同一个时刻, 就只能有一个unique_ptr指向这个对象(内存),unique_ptr的使用格式 unique_ptr<Class_Tyep> P_Name; unique_ptr的常规初始化: unique_ptr<int> p; 创建一个空…

监控Kafka的关键指标

Kafka 架构 上面绿色部分 PRODUCER&#xff08;生产者&#xff09;和下面紫色部分 CONSUMER&#xff08;消费者&#xff09;是业务程序&#xff0c;通常由研发人员埋点解决监控问题&#xff0c;如果是 Java 客户端也会暴露 JMX 指标。组件运维监控层面着重关注蓝色部分的 BROKE…

Vue 实现重定向、404和路由钩子(六)

一、重定向 1.1 修改 Main.vue <template><div><el-container><el-aside width"200px"><el-menu :default-openeds"[1]"><el-submenu index"1"><template slot"title"><i class"…

MongoDB常用命令

什么是MongoDB ? MongoDB 是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。 在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB 将数据存储为一个…

【网络基础实战之路】基于BGP协议中的联邦号连接三个AS区域的实战详解

系列文章传送门&#xff1a; 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 【网络基础实战之路】基于…

Dalsa线阵相机说明(Linea Color GigESeries 2k and 4K)

文章目录 一. Dalsa相机软件整体架构二. 相机编号说明以及软件要求三. 相机硬件参数三. 相机基本参数四. 软件参数设置列表1. Sensor Control Category2. I/O Control Category3. Counter and Timer Control Category4. Advanced Processing Control Category(1) 平场校正介绍(…

学习Vue:插值表达式和指令

在 Vue.js 中&#xff0c;Vue 实例与数据绑定是构建动态交互界面的关键。在这篇文章中&#xff0c;我们将重点介绍 Vue 实例中两种实现数据绑定的方式&#xff1a;插值表达式和指令。这些机制允许您将数据无缝地渲染到界面上&#xff0c;实现实时的数据更新和展示。 插值表达式…

U盘提示格式化怎么修复?学会这几个方法!

“不知道大家有没有遇到过将u盘插入电脑后提示格式化的情况呀&#xff1f;第一次遇到这种情况真的好无助&#xff0c;这是可以修复的吗&#xff1f;请大家帮帮我&#xff01;” U盘作为一个便捷的存储工具&#xff0c;帮助我们存储了很多重要的数据和文件。但在使用的过程中&am…

Dockerfile 使用技巧篇

默认的 docker 镜像使用 Linux 来当作基础镜像 01. 使用 alpine 镜像&#xff0c;而不是默认的 linux 镜像 PS: alpine 译为高山植物&#xff0c;就是很少的资源就能存活的意思。alpine 裁剪了很多不必要的 linux 功能&#xff0c;使得镜像体积大幅减小了。 比如 FROM node:1…

PHP8定义字符串的方法-PHP8知识详解

字符串&#xff0c;顾名思义&#xff0c;就是将一堆字符串联在一起。字符串简单的定义方法是使用英文单引号&#xff08; &#xff09;或英文双引号&#xff08;" "&#xff09;包含字符。另外&#xff0c;还可以使用定界符定义字符串。本文还介绍了字符串的连接符。…