element表格宽度异常

最新推荐文章于 2024-07-18 18:15:39 发布

qianxiling123

最新推荐文章于 2024-07-18 18:15:39 发布

阅读量683

点赞数

分类专栏：学习笔记文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/liutianxiao123/article/details/123375785

版权

学习笔记专栏收录该内容

42 篇文章 0 订阅

订阅专栏

这篇博客探讨了在全屏切换时表格宽度溢出的问题，提供了解决方案。内容涉及HTML元素的布局调整，使用了`position: absolute`和`width: 100%`来确保表格在全屏模式下适配。此外，还展示了不同tab面板的数据总览、可视化展示和地图浏览功能。

摘要由CSDN通过智能技术生成

    <div class="sjzl-conponent" :class="isFullScreen?'full':'notFull'">
        <div style="width: 100%;position: absolute;">
            <el-tabs v-model="activeName">
            <el-tab-pane label="数据总览" name="first">
                <el-table :data="tableData" border style="width: 100%;">
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="可视化展示" name="second">

            </el-tab-pane>
            <el-tab-pane label="地图浏览" name="third">

            </el-tab-pane>
            </el-tabs>
        </div>
        <div style="position: absolute;top: 10px;right: 10px;color: #2482ED;z-index: 999">
            <a @click="isFullScreen = !isFullScreen"><i class="el-icon-full-screen" style="margin-right: 10px;">全屏</i></a>
            <a @click="$emit('clockSJZL', false);"><i class="el-icon-back" >返回</i></a>
        </div>
    </div>

全屏切换时表格宽度溢出，可以在表格外加上div，设置position：absolute，width：100%

.full{
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 9999;
}
.notFull{
    position: relative;
    // width: calc(~'100vh-430px');
}