el-table自适应缩放大小

news2024/11/25 5:03:09

安装依赖

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>



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

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

相关文章

Haproxy+Keepalived高可用部署

环境准备&#xff1a; IPVIPmasterhaproxy192.168.134.170192.168.134.100backuphaproxy192.168.134.172192.168.134.100web1192.168.134.171web2192.168.134.173web3192.168.134.174 1、首先配置啊三台web服务器&#xff0c;并写好测试页面。 web1&#xff08;配置jsp页面&…

Wlan——CAPWAP协议的报文格式与报文封装

目录 CAPWAP报文携带信息 Discovery报文&#xff08;AP先发&#xff09; Join报文&#xff08;AP先发&#xff09; Configuration Status报文&#xff08;AP先发&#xff09; Change State报文&#xff08;AP先发&#xff09; Echo报文&#xff08;AP和AC都可以先发&…

2023 CCF BDCI 数字安全公开赛正式开启报名

2023 CCF BDCI 数字安全公开赛重磅来袭&#xff01; 全新的赛道场景 丰厚的赛事奖励 精彩的周边活动 数字安全守护人的狂欢盛宴 快来报名参加吧 大赛背景 伴随着数智化的持续加深&#xff0c;网络安全、数据安全风险遍布于所有场景之中&#xff0c;包括工业生产、能源、交…

SSH远程连接MacOS catalina并进行终端颜色配置

一、开关SSH服务 在虚拟机上安装了MacOS catalina&#xff0c;想要使用SSH远程进行连接&#xff0c;但是使用“系统偏好设置”/“共享”/“远程登录”开关进行打开&#xff0c;却一直是正在启动“远程登录”&#xff1a; 难道是catalina有BUG&#xff1f;不过还是有方法的&…

2023年许战海咨询《竞争之王CEO年度辅导工程》火热招募中

今天产业迭代速度不断加剧,人类知识更迭周期大大压缩到2年以内,企业遭遇更多挑战:如增长乏力、品牌老化、竞争压力大、竞争方向不明确、产品同质化、利润越来越低、团队执行难等。《竞争之王CEO年度辅导工程》应运而生,旨在手把手辅导企业家及高管团队如何制定战略和落地战略&a…

Wireshark有线网卡抓包报错The capture session could not be initiated on capture device

最近在使用Wireshark进行抓包排错时&#xff0c;选择网卡后提示报错&#xff0c;在此之前从未出现过&#xff0c;报错内容如下&#xff1a; 提示内容是The capture session could not be initiated on capture device&#xff0c;无法在捕获设备上启动捕获会话要求操作是Please…

解密人工智能:线性回归 | 逻辑回归 | SVM

文章目录 1、机器学习算法简介1.1 机器学习算法包含的两个步骤1.2 机器学习算法的分类 2、线性回归算法2.1 线性回归的假设是什么&#xff1f;2.2 如何确定线性回归模型的拟合优度&#xff1f;2.3 如何处理线性回归中的异常值&#xff1f; 3、逻辑回归算法3.1 什么是逻辑函数?…

5.0 Spring Boot核心

1. Spring Boot注解 注解名称 注解说明 SpringBootApplication 用于标注Spring Boot应用为启动类&#xff0c;是一个组合注解&#xff0c;主要组合了SpringBootConfiguration、EnableAutoConfiguration和ComponentScan注解 SpringBootConfiguration 继承自Configuration&a…

以开放促发展 同创永益召开数字韧性生态交流会

8月3日&#xff0c;同创永益数字韧性生态交流会在北京总部举办&#xff0c;30多家合作伙伴、渠道商齐聚一堂&#xff0c;围绕同创永益品牌、产品、行业解决方案进行充分探讨&#xff0c;共话行业前瞻趋势&#xff0c;共绘跨越增长新蓝图。 活动开始前&#xff0c;同创永益渠道管…

C++——函数重载及底层原理

函数重载的定义 函数重载&#xff1a; 是函数的一种特殊情况&#xff0c;C允许在同一作用域重声明几个功能类似的同名函数&#xff0c;这些同名函数的形参列表&#xff08;参数个数或者类型&#xff0c;类型的顺序&#xff09;不同&#xff0c;常用来处理实现功能类似数据结构…

超好用的接口自动化框架,lemon-easytest内测版发布,赶紧用起来~

easytest easytest 是一个接口自动化框架。 功能特点&#xff1a; 支持 http 接口测试 支持 json&#xff0c;html,xml 格式的响应断言 支持数据库断言 支持用例标记筛选 支持用例失败重运行 支持多线程 安装 pip install lemon_easytest 快速使用 不需要写任何代码…

wsl没有响应,wsl启动失败,docker启动失败

wsl的相关问题记录和解决 问题一&#xff1a;cmd命令窗口输入wsl后没有响应&#xff0c;会卡住&#xff0c;类似如图 排查&#xff1a; 输入 wsl -l -v看是否有东西输出&#xff1b;我的电脑没有东西输出&#xff0c;依旧是卡住;有内容请重启试试从开始菜单打开&#xff0c;点…

【Git】大大大问题之syntax error near unexpected token `(‘ 的错误解决办法

话不多说&#xff0c;先上图&#xff1a; 如图&#xff0c;因为在linux环境里&#xff0c;文件路径中含有括号&#xff08;&#xff09;&#xff0c;因此报错&#xff01; 解决办法 等同于 &#xff1a;linux下解决bash: syntax error near unexpected token (’ 的错误&am…

【中危】Apache Airflow Drill Provider < 2.4.3 存在任意文件读取漏洞

漏洞描述 Apache Airflow Drill Provider 是 Apache Airflow 项目中的一个模块&#xff0c;用于提供与 Apache Drill 数据引擎的集成。 2.4.3 之前版本中&#xff0c;由于 drill#create_engine 方法未对用户传入的 url 参数进行过滤&#xff0c;攻击者可构造恶意的查询参数&a…

MYSQL-习题掌握

文章目录 SQL基本操作1 设计表操作1.1 关系表字段1.2 关系表创建1.3 关系表数据1.4 关系表关系 2 SQL操作2.1 SQL 1-102.2 SQL 11-202.3 SQL 21-302.4 SQL 31-402.5 SQL 41-50 SQL基本操作 1 设计表操作 1.1 关系表字段 1 学生表 student s_ids_names_births_sex学生编号学…

第二部分:AOP

一、AOP简介 AOP(Aspect Oriented Programming)面向切面编程&#xff0c;一种编程范式&#xff0c;指导开发者如何组织程序结构。 AOP是OOP&#xff08;面向对象编程&#xff09;的进阶版。 作用&#xff1a;在不改变原始设计的基础上为其进行功能增强。 spring理念&#x…

STM32入门——USART

江科大STM32学习记录 通信接口 通信的目的&#xff1a;将一个设备的数据传送到另一个设备&#xff0c;扩展硬件系统通信协议&#xff1a;制定通信的规则&#xff0c;通信双方按照协议规则进行数据收发 串口通信 串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、…

Web菜鸟教程 - Swagger实现自动生成文档

如果是一个人把啥都开发了&#xff0c;那用不到Swagger-UI&#xff0c;但一般情况是前后端分离的&#xff0c;所以就需要告诉前端开发人员都有哪些接口&#xff0c;传入什么参数&#xff0c;怎么调用&#xff0c;返回什么。有了Swagger-UI就能把这部分文档编写的业务给省去了。…

Wlan——CAPWAP隧道的建立过程

CAPWAP基本概念 CAPWAP全称为无线接入点的控制和配置协议&#xff08;Control And Provisioning of Wireless Access Points Protocol Specification&#xff09; CAPWAP协议主要作用 1、AP可以通过CAPWAP实现自动发现AC 2、AC通过CAPWAP协议对AP进行管理、业务配置下发 3…

一百五十二、Kettle——Kettle9.3.0本地连接Hive3.1.2(踩坑,亲测有效)

一、目的 由于先前使用的kettle8.2版本在Linux上安装后&#xff0c;创建共享资源库点击connect时页面为空&#xff0c;后来采用如下方法&#xff0c;在/opt/install/data-integration/ui/menubar.xul文件里添加如下代码 <menuitem id"file-openZiyuanku" label&…