element-ui 表格滚动条(不同分辨率)自适应问题;

简介: element-ui 表格滚动条(不同分辨率)自适应问题;

element-ui 表格滚动条(不同分辨率)自适应问题;

先来说下需求:

表格中的数据,一般分页的时候会导致侧边栏有垂直滚动条,然后由于字段过多,所以水平也有滚动条,想要实现的效果就是无论分页多少,滚动条的位置一直是不变的(水平滚动条一直固定在底部;垂直滚动条固定或者不要)

另外就是需要根据不同屏幕的分辨率进行自适应调整。

实现

1、首先 需要在表格添加对应的字段:

ref="moviesTable"

:height="tableHeight":绑定指定的高度

<el-table v-loading="loading" :data="queryList" @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName" ref="moviesTable" @row-click="clickRow" :height="tableHeight">

2、然后声明对应的字段;

之后监听窗口变化,根据窗口变化自适应计算高度;

export default {
    data(){
        return {
          //表格高度
           tableHeight: 0,
        }
    },
    mounted:function(){
        this.$nextTick(function(){
            this.tableHeight = window.innerHeight - this.$refs.moviesTable.$el.offsetTop - 160;
            // 监听窗口大小变化
            let that= this;
            window.onresize = function() {
            //this.$refs.moviesTable.$el.offsetTop:表格距离浏览器的高度
            that.tableHeight = window.innerHeight - that.$refs.moviesTable.$el.offsetTop - 160
            }
        })
    }
}
相关文章
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
1417 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
313 1
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
458 1
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
1585 0
Element UI & Element Plus之改变表格单元格颜色
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
539 0
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
523 0
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
634 0
|
8月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
255 15
|
8月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
289 11

热门文章

最新文章