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%"
      border
      style="width: 100%"
      
    >
      <el-table-column
        label="日期"
        prop="date"
        :show-overflow-tooltip="true"
       
      ></el-table-column>
      <el-table-column
        label="姓名"
        prop="name"
        :show-overflow-tooltip="true"
       
      ></el-table-column>
      <el-table-column
        label="地址"
        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>



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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

linux中的/dev/null

1.什么是/dev 在 Linux 上&#xff0c;从驱动程序到设备的所有内容都可以作为文件进行访问。/dev/ 是包含所有物理和虚拟设备的目录。例如&#xff0c;/dev/sda 可能是您的主硬盘驱动器&#xff0c;/dev/sdb 可能是您现在正在使用的笔记本驱动器的文件。这就是您在 Linux 中访问…

原子css 和 组件化css如何搭配使用

如果让你来实现下面这种页面&#xff0c;该怎么实现呢 原子化和css组件化方式写法&#xff0c;可以搭配起来使用&#xff0c;常用的css 原子css 比如 下面这些类似flex 布局&#xff0c;lstn curser-pointer 等常用的或者 具备一定规律性的padding margin 样式可以抽取为单独…

KubeSphere 部署 Zookeeper 实战教程

前言 知识点 定级&#xff1a;入门级如何利用 AI 助手辅助运维工作单节点 Zookeeper 安装部署集群模式 Zookeeper 安装部署开源应用选型思想 实战服务器配置(架构 1:1 复刻小规模生产环境&#xff0c;配置略有不同) 主机名IPCPU内存系统盘数据盘用途ks-master-0192.168.9.9…

【maven】通过profiles实现:怎样激活某个仓库、同时加载多个profile、不同环境加载不同依赖jar

文章目录 一. 基本用法二. 仓库激活方式1. 使用activeProfile激活2. 使用-P参数激活3. 使用-P参数不激活 三. 查看激活的仓库四. 不同环境依赖不同版本的jar Maven中的profile是一组可选的配置&#xff0c;可以用来设置或者覆盖配置默认值。有了profile&#xff0c;你就可以为不…

【elementUi】绘制自定义表格、绘制曲线表格

要求绘制下图系列表格&#xff1a; 实现步骤: 1.绘制树&#xff0c;实现树勾选字段—>表格绘制字段 逻辑&#xff1a; 树&#xff1a;check-change“treeChart.handleCheckChange” 绑定点击选择事件&#xff0c;改变data.column3数据项&#xff1b;表格:columns"data…

问AI一个严肃的问题

chatgpt的问世再一次掀起了AI的浪潮&#xff0c;其实我一直在想&#xff0c;AI和人类的关系未来会怎样发展&#xff0c;我们未来会怎样和AI相处&#xff0c;AI真的会完全取代人类吗&#xff0c;带着这个问题&#xff0c;我问了下chatgpt&#xff0c;看一看它是怎么看待这个问题…

图解WebSocket

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱写博客的嗯哼&#xff0c;爱好Java的小菜鸟 &#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&#x1f44d;一下博主哦 &#x1f4dd;个人博客&#xff1a;敬请期待 文章目录 前言一、…

【量化课程】02_4.数理统计的基本概念

2.4_数理统计的基本概念 数理统计思维导图 更多详细内容见notebook 1.基本概念 总体&#xff1a;研究对象的全体&#xff0c;它是一个随机变量&#xff0c;用 X X X表示。 个体&#xff1a;组成总体的每个基本元素。 简单随机样本&#xff1a;来自总体 X X X的 n n n个相互…

asp.net core webapi如何执行周期性任务

使用Api执行周期性任务 第一种&#xff0c;无图形化界面1.新建类&#xff0c;继承IJob&#xff0c;在实现的方法种书写需要周期性执行的事件。2.编写方法类&#xff0c;定义事件执行方式3.在启动方法中&#xff0c;进行设置&#xff0c;.net 6中在program.cs的Main方法中&#…

c51单片机串行通信示例代码(单片机--单片机通信)(附带proteus线路图)

//这个发送端代码 #include "reg51.h" #include "myheader.h" #define uchar unsigned char long int sleep_i0; long int main_i0; void main() {uchar sendx[6]{2,0,2,3,8,1};sleep(2000);TMOD0x20;TH10XF4;//根据波特率计算公式这里需要设置为这么多才能…

对自定义表格数据设计自定义查询/汇总

目录 1 前言 2 生成数据 3 设计一个汇总 4 试一下效果 5 导出为excel文件的源代码 6 后记 1 前言 对自定义表格中录入或者导入的数据&#xff0c;必须能定义查询和汇总&#xff0c;否则程序基本没什么用。就是说&#xff0c;程序应该具备对任意表格进行方便的查询汇总公式…

DatawhaleAI夏令营第三期机器学习用户新增预测挑战赛baseline新手教程

本教程会带领大家项目制学习&#xff0c;由浅入深&#xff0c;逐渐进阶。从竞赛通用流程与跑通最简的Baseline&#xff0c;到深入各个竞赛环节&#xff0c;精读Baseline与进阶实践技巧的学习。 千里之行&#xff0c;始于足下&#xff0c;从这里&#xff0c;开启你的 AI 学习之旅…

预训练GNN:GPT-GNN Generative Pre-Training of Graph Neural Networks

一.文章概述 本文提出了一种自监督属性图生成任务来预训练GNN&#xff0c;使得其能捕图的结构和语义属性。作者将图的生成分为两个部分&#xff1a;属性生成和边生成&#xff0c;即给定观测到的边&#xff0c;生成节点属性&#xff1b;给定观测到的边和生成的节点属性&#xf…

01:STM32点灯大师和蜂鸣器

目录 一:点亮1个LED 1:连接图 2:函数介绍 3:点灯代码 二:LED闪烁 1:函数介绍 2:闪烁代码 三:LED流水灯 1:连接图 2:函数介绍 3:流水灯代码 四:按键控制LED 1:电路图 2:连接图 3:函数介绍 4:按键控制LED代码 五:蜂鸣器 1:连接图 2:蜂鸣器代码 六:光敏电阻控制…

pywinauto结合selenium实现文件上传

简介 PC端-Windows上的元素识别可用viewWizard工具 PC端-Windows上的元素操作可用pywinauto库 浏览器上网页的元素识别可用selenium 安装 pip installer pywinauto 使用须知 pywinauto官方文档 确定app的可访问技术 1、win32 API(backend“win32”) 一般是MFC、VB6、VCL…

07_Hudi案例实战、Flink CDC 实时数据采集、Presto、FineBI 报表可视化等

7.第七章 Hudi案例实战 7.1 案例架构 7.2 业务数据 7.2.1 客户信息表 7.2.2 客户意向表 7.2.3 客户线索表 7.2.4 线索申诉表 7.2.5 客户访问咨询记录表 7.3 Flink CDC 实时数据采集 7.3.1 开启MySQL binlog 7.3.2 环境准备 7.3.3 实时采集数据 7.3.3.1 客户信息表 7.3.3.2 客户…

【Unity】ShaderGraph应用(模型膨胀流动)

【Unity】ShaderGraph应用&#xff08;模型膨胀流动&#xff09; 实现效果 ShaderGraph是 unity的图形化 Shader 编程工具。本文介绍使用ShaderGraph实现模型的膨胀流动效果。该效果可以由于模拟流体在管线中的流动等相关功能。 一、实现的方法 1.使用节点介绍 关键节点 UV…

【C#】静默安装、SQL SERVER静默安装等

可以通过cmd命令行来执行&#xff0c;也可以通过代码来执行&#xff0c;一般都需要管理员权限运行 代码 /// <summary>/// 静默安装/// </summary>/// <param name"fileName">安装文件路径</param>/// <param name"arguments"…

实录分享 | 使用Prometheus和Grafana监控Alluxio运行状况

欢迎来到【微直播间】&#xff0c;2min纵览大咖观点 本次分享主要包括三个方面&#xff1a; Prometheus&Grafana简介环境搭建手动调优 一、 Prometheus&Grafana简介关于Prometheus&#xff1a; Prometheus 是一个开源的完整监控解决方案&#xff0c;其对传统监控系…

【腾讯云 Cloud Studio 实战训练营】使用 Cloud Studio 快速构建 Vue + Vite 完成律师 H5 页面

【腾讯云 Cloud Studio 实战训练营】使用 Cloud Studio 快速构建 Vue Vite 完成律师 H5 页面 前言一、基本介绍1.应用场景2.产品优势 二、准备工作1.注册 Cloud Studio2.进入 Vue 预置开发环境 三、使用 Cloud Studio 快速构建 Vue Vite 完成律师 H5 页面1.安装相关依赖包2.主…