el-table添加固定高度height后高度自适应

0 效果

在这里插入图片描述

1 添加自定义指令

新建目录src/directive/el-table
在el-table目录下新建文件adaptive.js

import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'// 设置表格高度const doResize = async(el, binding, vnode) => {// 获取表格Dom对象const { componentInstance: $table } = await vnode// 获取调用传递过来的数据 const { value } = bindingif (!$table.height) {throw new Error(`el-$table must set the height. Such as height='100px'`)}// 获取距底部距离(用于展示页码等信息)const bottomOffset = (value && value.bottomOffset) || 90if (!$table) return// 计算列表高度并设置const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset$table.layout.setHeight(height)$table.doLayout()
}export default {  // 初始化设置bind(el, binding, vnode) { // 设置resize监听方法el.resizeListener = async() => { await doResize(el, binding, vnode)}    // 绑定监听方法到addResizeListeneraddResizeListener(window.document.body, el.resizeListener)  },  // 绑定默认高度async inserted(el, binding, vnode) { await doResize(el, binding, vnode)  },  // 销毁时设置unbind(el) { // 移除resize监听removeResizeListener(el, el.resizeListener)  }
}

在el-table目录下新建index.js

import adaptive from './adaptive'const install = function(Vue) {   // 绑定v-adaptive指令Vue.directive('adaptive', adaptive)
}if (window.Vue) {window['adaptive'] = adaptive  // eslint-disable-next-line no-undef Vue.use(install)
}adaptive.install = installexport default adaptive

2 引入

2.1 单个vue文件引入

在所需使用的vue页面中引入
import adaptive from ‘…/…/…/src/directive/el-table’
在这里插入图片描述

2.2 全局引入

在main.js中引入
在这里插入图片描述

3 使用

在el-table标签中添加属性
v-adaptive:自定义指令,bottomOffset 代表距离底部的距离
height:高度属性,100无具体意义,仅为初始值,不可省略
在这里插入图片描述

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

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

相关文章

S32K144芯片焊接完成后使用S32DS初次下载无法下载解决方法

一、问题现象如下,S32DS Debug下报错 二、原因,原厂芯片出厂时的FLASH Memory的安全机制是激活的,仿真器是可以连上,但是没法读取Flash Memory的内容 三、解决方法 参考图示,解锁后即可正常Debug

深入理解Java中的转义字符

最近在学习《两周自制脚本语言》这本书,在词法分析的一些复杂的正则中用到了大量的转义字符’\,比如正则字符串中包含了这个部分\\\\\"你知道它是匹配什么的么? 反斜杠在字符串和正则表达式中都有特殊作用。今天让我们来深入理解一下Ja…

数据分享 I 地级市人口和土地使用面积基本情况

数据地址: 地级市人口和土地使用面积基本情况https://www.xcitybox.com/datamarketview/#/Productpage?id394 基本信息. 数据名称: 地级市人口和土地使用面积基本情况 数据格式: ShpExcel 数据时间: 2021年 数据几何类型: 面 数据坐标系: WGS84坐标系 数据…

【计算机毕设经典案例】基于微信小程序的图书管理系统

前言:我是IT源码社,从事计算机开发行业数年,专注Java领域,专业提供程序设计开发、源码分享、技术指导讲解、定制和毕业设计服务 👉IT源码社-SpringBoot优质案例推荐👈 👉IT源码社-小程序优质案例…

『力扣刷题本』:移除链表元素

一、题目 给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val val 的节点,并返回 新的头节点 。 示例 1: 输入:head [1,2,6,3,4,5,6], val 6 输出:[1,2,3,4,5]示例 2: 输入&a…

在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域,解决跨域请求的一次残酷经历

首先,说一下我们的项目情况,我们项目中后端有一个过滤器,如果必须要登录的接口路径会被拦下来检查,前端要传一个token,然后后端根据这个token来判断redis中这个用户是否已经登录。 if (request.getMethod().equals(&qu…

css 三栏布局的实现?

目录 前言 用法 代码 理解 高质量图片 1. 左侧栏 - 导航菜单 2. 中间栏 - 主要内容 3. 右侧栏 - 小部件和广告 布局的响应式设计 三栏布局在前端页面设计中是一个常见的布局方式,通常包含左侧、中间和右侧三个部分。这种布局方式在多种场景中都很受欢迎&am…

解决Windows出现找不到mfcm90u.dll无法打开软件程序的方法

今天,我非常荣幸能够在这里与大家分享关于mfc90u.dll丢失的5种解决方法。在我们日常使用电脑的过程中,可能会遇到一些软件或系统错误,其中之一就是mfc90u.dll丢失。那么,mfc90u.dll究竟是什么文件呢?接下来&#xff0c…

【表面缺陷检测】钢轨表面缺陷检测数据集介绍(2类,含xml标签文件)

一、介绍 钢轨表面缺陷检测是指通过使用各种技术手段和设备,对钢轨表面进行检查和测量,以确定是否存在裂纹、掉块、剥离、锈蚀等缺陷的过程。这些缺陷可能会对铁路运输的安全和稳定性产生影响,因此及时进行检测和修复非常重要。钢轨表面缺陷…

spring boot利用redis作为缓存

一、缓存介绍 在 Spring Boot 中,可以使用 Spring Cache abstraction 来实现缓存功能。Spring Cache abstraction 是 Spring 框架提供的一个抽象层,它对底层缓存实现(如 Redis、Ehcache、Caffeine 等)进行了封装,使得在…

微服务-Feign

文章目录 Feign介绍Feign的基本使用自定义Feign的配置Feign性能优化Feign最佳实践 Feign介绍 RestTemplate远程调用存在的问题:代码可读性差,java代码中夹杂url;参数复杂很难维护 String url "http://userservice/user/" order.g…

有一个带头结点的单链表L,设计一个算法使其元素递增有序

有一个带头结点的单链表L,设计一个算法使其元素递增有序 代码思路: 我这里懒得搞那个指针了,直接遍历一遍链表,把链表的元素复制到数组arr里面 对数组A进行一下排序,排完之后再把元素复制到L里面。 至于排序你用啥算…

1820_ChibiOS中的同步消息

全部学习汇总: GreyZhang/g_ChibiOS: I found a new RTOS called ChibiOS and it seems interesting! (github.com) 1. 看到这里提到的这个模型,我在想是不是我一直没有搞定的多核可以利用这个机制来解决。如果是多核,ChibiOS的这种机制是否依…

【java学习—十】捕获异常(2)

文章目录 1. 什么是异常2. 异常处理机制3. 捕获异常总结3.1. try 和 catch3.2. 捕获异常的有关信息:3.3. finally 1. 什么是异常 如果程序运行时,某一行出现异常,将会使程序中断,不在继续执行,举个例子如下&#xff1…

二进制部署kubernetes集群的推荐方式

软件版本: 软件版本containerdv1.6.5etcdv3.5.0kubernetesv1.24.0 一、系统环境 1.1 环境准备 角色IP服务k8s-master01192.168.10.10etcd、containerd、kube-apiserver、kube-scheduler、kube-controller-manager、kubele、kube-proxyk8s-node01后续etcd、conta…

ARM 汇编指令 orreq 的使用

orreq 阅读代码时,发现有个【组合指令】 orreq, orr 一般是 OR,也就是或操作,后面加个 eq 表示什么呢? 比如下面的代码:前面一个操作, tst,好像没做实际的操作,可能影响…

[AutoSAR系列] 1.3 AutoSar 架构

依AutoSAR及经验辛苦整理,原创保护,禁止转载。 专栏 《深入浅出AutoSAR》 1. 整体架构 ​ 图片来源: AutoSar 官网 从官往图中可以看出autosar作为汽车ECU软件架构,是通过分层来实现软硬件隔离。就像大多数操作系统一样&#xff…

Docker swarm集群之compose启动多服务

Docker swarm集群之compose启动多服务 本篇文章是在搭建过Swarm集群基础上进行的,如未搭建过请移步 : [Docker swarm 集群搭建 - Wanwan’s Blog (wanwancloud.cn)] 环境信息 主机名IP主机配置master10.10.10.32c2gnode0110.10.10.42c2gnode0210.10.…

项目中拖拽元素,可以使用html的draggable属性,当然也可以用第三方插件interact

项目中拖拽元素&#xff0c;可以使用html的draggable属性&#xff0c;当然也可以用第三方插件interact 一、安装二、引用三、使用 一、安装 npm install interactjs二、引用 import interact from interactjs三、使用 <div class"drag_box"> &…

DevOps持续集成-Jenkins(1)

文章目录 DevOpsDevOps概述Code阶段工具&#xff08;centos7-gitlab主机&#xff09;Windows下安装Git&#xff08;作用是&#xff1a;使我们可以上传代码到GitLab&#xff09;Linux下安装GitLab⭐&#xff08;作用是&#xff1a;运行一个GitLab接收代码&#xff09;环境准备先…