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.pswp.cn/news/36185.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/36185.shtml
英文地址,請注明出處:http://en.pswp.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;還可以使用定界符定義字符串。本文還介紹了字符串的連接符。…