el-table根据容器大小自适应滚动条-修改滚动条样式

需求:父容器里有多个容器为上下级,之后浏览器在缩放的时候,上面容器高度改变了,所以el-table被挤压,如果el-table设置的是固定的高度,那么挤压后内容超出父容器,本文章就是解决这个问题

不自适应错误用法:浏览器伸缩挤压后元素超出了

 1.在el-table的父容器上添加class

table_height_big:用于控制浏览器屏幕在大于多少时的样式

table_height_small':浏览器宽高小于多少的样式

tableClass :变量用于类名切换,默认在data中为true

关键代码::class="tableClass ? 'table_height_big' : 'table_height_small'"

  <div class="container_main" :class="tableClass ? 'table_height_big' : 'table_height_small'">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" label="序号" align="center"> </el-table-column>
                    <el-table-column prop="name" label="操作内容" align="center"> </el-table-column>
                    <el-table-column prop="address" label="设备类型" align="center"> </el-table-column>
                </el-table>
                <div class="table-page-right">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                    >
                    </el-pagination>
                </div>
            </div>

 2.类名样式修改

这个40px,是浏览器在大于多少的时候,最上面元素的值

124就是浏览器小于1350的时候,顶部元素高度值,可以根据自己的元素高度来调整

 

    .table_height_big {
        height: calc(100% - 62px);
    }
    .table_height_small {
        height: calc(100% - 124px);
    }
::v-deep .el-table {
  height: 88%;
  .el-table__body-wrapper {
    height: calc(100% - 48px) !important; // 表格高度减去表头的高度
    overflow-y: auto;
  }
}

3.在mounted中添加window.addEventListener用于监听浏览器的宽高

window.innerWidth:当前浏览器的宽度为多少,我这边写的是如果是小于1350的话就修改类名,这个值需要你自己测试下宽度为多少才会换行,换行的时候修改类名就行

   mounted() {
        this.internetCardQuery();
        window.addEventListener('resize', this.internetCardQuery);
    },
    methods: {
        internetCardQuery() {
            if (window.innerWidth < 1350) {
                this.tableClass = false;
            } else {
                this.tableClass = true;
            }
        }
    },

4.销毁时取消监听

   beforeDestroy() {
        // 取消监听
        window.removeEventListener('resize', this.internetCardQuery);
    }

5.完整代码

<template>
    <div class="content-box">
        <div class="container">
            <div class="container_header">
                <el-form :inline="true" label-width="100px" :model="formInline">
                    <el-form-item label="选择时间:">
                        <el-date-picker
                            v-model="formInline.time"
                            type="datetimerange"
                            :picker-options="pickerOptions"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="设备类型:">
                        <el-select v-model="formInline.type" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="30px" label=" ">
                        <el-button type="primary">查询</el-button>
                        <el-button type="primary" plain>重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="container_main" :class="tableClass ? 'table_height_big' : 'table_height_small'">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" label="序号" align="center"> </el-table-column>
                    <el-table-column prop="name" label="操作内容" align="center"> </el-table-column>
                    <el-table-column prop="address" label="设备类型" align="center"> </el-table-column>
                    <el-table-column prop="name" label="描述" align="center"> </el-table-column>
                    <el-table-column prop="name" label="操作类型" align="center"> </el-table-column>
                    <el-table-column prop="name" label="操作人" align="center"> </el-table-column>
                </el-table>
                <div class="table-page-right">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            formInline: {
                time: '',
                type: ''
            },
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                },
                {
                    value: '选项2',
                    label: '双皮奶'
                }
            ],
            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 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],
            currentPage4: 5,
            tableClass: true
        };
    },
    mounted() {
        this.internetCardQuery();
        window.addEventListener('resize', this.internetCardQuery);
    },
    created() {},
    methods: {

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        internetCardQuery() {
            if (window.innerWidth < 1350) {
                this.tableClass = false;
            } else {
                this.tableClass = true;
            }
        }
    },
    beforeDestroy() {
        // 取消监听
        window.removeEventListener('resize', this.internetCardQuery);
    }
};
</script>

<style lang="scss" scoped>
.container {
    height: 85vh;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    .container_header {
        width: 100%;
    }
    .table-page-right {
        text-align: right;
        margin-top: 15px;
    }
    .table_height_big {
        height: calc(100% - 62px);
    }
    .table_height_small {
        height: calc(100% - 124px);
    }
}
/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; /* 横向滚动条 */
    height: 10px; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #dde;
    border-radius: 3px;
}
::v-deep .el-table {
  height: 88%;
  .el-table__body-wrapper {
    height: calc(100% - 48px) !important; // 表格高度减去表头的高度
    overflow-y: auto;
  }
}
</style>

6.效果

 文章到此结束,希望对你有所帮助~~

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

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

相关文章

2023年7月京东净水器行业品牌销售排行榜(京东数据分析软件)

伴随消费升级及健康生活理念的流行&#xff0c;消费者对饮水健康的关注度也逐步提高。加之经净水器处理的水在安全性、便捷性等方面的优势得到认可&#xff0c;净水器这一电器的市场占比也不断提高。在家电行业整体低迷的环境下&#xff0c;净水器的销量销额仍保持正向增长。 …

阿里云2核4G服务器配置汇总表_轻量和ECS

阿里云2核4G服务器配置价格表&#xff0c;297元一年&#xff0c;配置为轻量应用服务器2核4G、4M带宽、60GB高效云盘&#xff0c;折合24元一个月。 目录 2核4G服务器轻量&#xff1a; 2核4G服务器ECS 关于轻量和ECS的区别&#xff1a; 2核4G服务器轻量&#xff1a; 云服务器…

Docker碎碎念

docker和虚拟机的区别 虚拟机&#xff08;VM&#xff09;是通过在物理硬件上运行一个完整的操作系统来实现的。 每个虚拟机都有自己的内核、设备驱动程序和用户空间&#xff0c;它们是相互独立且完全隔离的。 虚拟机可以在不同的物理服务器之间迁移&#xff0c;因为它们是以整…

快速提高写作生产力——使用PicGo+Github搭建免费图床,并结合Typora

文章目录 简述PicGo下载PicGo获取Token配置PicGo结合Typora总结 简述PicGo PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具 PicGo 本体支持如下图床&#xff1a; 七牛图床 v1.0腾讯云 COS v4\v5 版本 v1.1 & v1.5.0又拍云 v1.2.0GitHub v1.5.0SM.MS V2 v2.3.0-b…

漏洞挖掘和安全审计的技巧与策略

文章目录 漏洞挖掘&#xff1a;发现隐藏的弱点1. 源代码审计&#xff1a;2. 黑盒测试&#xff1a;3. 静态分析工具&#xff1a; 安全审计&#xff1a;系统的全面评估1. 渗透测试&#xff1a;2. 代码审计&#xff1a;3. 安全策略审查&#xff1a; 代码示例&#xff1a;SQL注入漏…

TCP编程流程(补充)

目录 1、listen&#xff1a; 2、listen、tcp三次握手 3、 发送缓冲区和接收缓冲区&#xff1a; 4、tcp编程启用多线程 1、listen&#xff1a; 执行listen会创建一个监听队列 listen(sockfd,5) 2、listen、tcp三次握手 三次握手 3、 发送缓冲区和接收缓冲区&#xff1a;…

Spring事务和事务传播机制(2)

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 在Spring框架中&#xff0c;事务管理是一种用于维护数据库操作的一致性和…

Gitlab 安装全流程

Version&#xff1a;gitlab-ce:16.2.4-ce.0 简介 Gitlab 是一个开源的 Git 代码仓库系统&#xff0c;可以实现自托管的 Github 项目&#xff0c;即用于构建私有的代码托管平台和项目管理系统。系统基于 Ruby on Rails 开发&#xff0c;速度快、安全稳定。它拥有与 Github 类似…

Java算法_ BST 中第 k 个最小元素 (LeetCode_Hot100)

题目描述&#xff1a;给定一个二叉搜索树的根节点 &#xff0c;和一个整数 &#xff0c;请你设计一个算法查找其中第 个最小元素&#xff08;从 1 开始计数&#xff09;。 获得更多&#xff1f;算法思路:代码文档&#xff0c;算法解析的私得。 运行效果 完整代码 /*** 2 * Aut…

Linux学习记录——이십오 多线程(2)

文章目录 1、理解原生线程库线程局部存储 2、互斥1、并发代码&#xff08;抢票&#xff09;2、锁3、互斥锁的实现原理 3、线程封装1、线程本体2、封装锁 4、线程安全5、死锁6、线程同步1、条件变量1、接口2、demo代码 1、理解原生线程库 线程库在物理内存中存在&#xff0c;也…

Redis 数据库 NoSQL

目录 一、NoSQL 二、为什么会出现NoSQL技术 三、NoSQL的类别 键值&#xff08;Key-Value&#xff09;存储数据库 列存储数据库 文档型数据库 图形&#xff08;Graph&#xff09;数据库 四、NoSQL适应场景 五、在分布式数据库中CAP原理 1、CAP 2、BASE 一、NoSQL NoS…

低代码开发平台能开发什么类型的系统和软件?

低代码开发平台能开发什么类型的系统和软件&#xff1f; 1、数据分析和报告系统&#xff1a; 使用低代码平台&#xff0c;企业可以创建数据看板&#xff0c;集成不同数据源&#xff0c;自动提取、分析和可视化数据。这种系统适用于监控业务指标、分析趋势&#xff0c;并为决策…

多个微信号怎么快速发圈、自动加好友、自动回复?

一键助你快速发圈、批量自动加好友、自动回复&#xff0c;好用哭了&#xff01; 微信管理系统是一个聚合管理多个微信账号的利器&#xff0c;让你的微信管理变得简单高效。不管你是电商、微商&#xff0c;还是拥有多个微信号的用户&#xff0c;这一款微信管理软件都可以满足你的…

vue2+qrcodejs2+clipboard——实现二维码展示+下载+复制到剪切板——基础积累

最近在写后台管理系统时&#xff0c;遇到一个需求就是要实现二维码的展示下载复制到剪切板。 效果图如下&#xff1a; 1.二维码展示下载功能——qrcodejs20.0.2 我是安装的qrcodejs20.0.2&#xff0c;指定了具体的版本号&#xff0c;也可以安装默认的当前稳定版本&#xff0…

门店数字化店务经营系统怎么做?门店数字化系统推荐

为什么你的门店无人问津&#xff0c;有的门店却天天都有到店客户&#xff1f;为什么你的门店要花费两三天才能统计好经营情况&#xff0c;有的门店却能够做到“数据实时可查”&#xff1f;经营管理和营销获客是每个门店发展的重中之重&#xff0c;今天也为大家分享一套完善的门…

西门子SCALANCE W744-1PRO 客户端配置

. 安装西门子无线搜索软件PST。 无线SCALANCE W788-1PRO参数设置。 打开PST软件&#xff1a;选择Settings->Network Adapter->2本地连接 输入该无线设置的IP地址&#xff0c;进入网络访问界面。输入密码&#xff1a;admin&#xff0c;点击Log on进入。 填写本无线的SSI…

kaggle推荐系统比赛top方案汇总【附baseline代码】

推荐系统可以很好地解决信息过载以及信息不足等问题&#xff0c;广泛应用与电商、金融、新闻咨询、社交、旅游等行业&#xff0c;其中最典型并具有良好的发展和应用前景的领域就是电子商务领域。 在学术界&#xff0c;推荐系统同样是热门的研究方向&#xff0c;在各大顶会中的…

中文医学知识语言模型:BenTsao

介绍 BenTsao&#xff1a;[原名&#xff1a;华驼(HuaTuo)]: 基于中文医学知识的大语言模型指令微调 本项目开源了经过中文医学指令精调/指令微调(Instruction-tuning) 的大语言模型集&#xff0c;包括LLaMA、Alpaca-Chinese、Bloom、活字模型等。 我们基于医学知识图谱以及医…

LeetCode——二叉树篇(八)

刷题顺序及思路来源于代码随想录&#xff0c;网站地址&#xff1a;https://programmercarl.com 目录 236. 二叉树的最近公共祖先 235. 二叉搜索树的最近公共祖 迭代 递归 701. 二叉搜索树中的插入操作 450. 删除二叉搜索树中的节点 236. 二叉树的最近公共祖先 给定一个二…

【回味“经典”】DFS练习题解(工作分配问题,最大平台)

这篇文章是一年前写的 走进“深度搜索基础训练“&#xff0c;踏入c算法殿堂&#xff08;四&#xff09;和 走进“深度搜索基础训练“&#xff0c;踏入c算法殿堂&#xff08;二&#xff09;的重编版。 希望以此&#xff0c;唤起对那位故人的回忆。 【搜索与回溯算法】工作分配问…