Vue使用element-ui/plus组件布局容器container失效解决方法

最新推荐文章于 2025-05-24 23:21:25 发布
原创 最新推荐文章于 2025-05-24 23:21:25 发布 · 5.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #ui #elementui

分享了关于在Element UI中如何正确使用layout组件的困扰经历，指出官方推荐的写法是将el-header, aside, main, footer直接放在el-container内，避免在子组件中嵌套。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这个错我遇到了好几次，每一次都花了很长时间解决，还是决定写个笔记记录一下。

在使用elementu官网的布局容器时，他是这样的。

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-main>Main</el-main>
</el-container>

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

我在确定elementui引入正确的情况下是这样写的。

<template>
  <el-container>
    <SideNav></SideNav>
    <el-container>
      <el-main><Main></Main></el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </el-container>
</template>

<script>
import SideNav from "@/components/SideNav";
import HomeHeader from "@/pages/Home/HomeHeader";
import "element-ui/lib/theme-chalk/index.css";
import Header from "@/components/Header";
export default {
  name: "Home",
  components: { SideNav, HomeHeader, Header },
};
</script>
<style  scoped>
.baseContainer {
  height: 100%;
  width: 100%;
  position: relative;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

注意，我在SideNav，Header,Main,Footer组件套了el-aside,el-header...然后暴露出来在Home中引用。

当然错误，布局一片混乱。想了一下午终于懂了。

原来，elementui不支持这种写法，在Home里面应该完全遵循官网的写法，el-aside,el-header,el-mian,el-footer等必须写在container的同一个组件，不能写在子组件里面然后引入，不然elementui不会识别为布局容器。

正确写法

<template>
  <el-container>
    <el-aside>
      <SideNav></SideNav>
    </el-aside>
    <el-container>
      <el-main><Main></Main></el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </el-container>
</template>

<script>
import SideNav from "@/components/SideNav";
import HomeHeader from "@/pages/Home/HomeHeader";
import "element-ui/lib/theme-chalk/index.css";
import Header from "@/components/Header";
export default {
  name: "Home",
  components: { SideNav, HomeHeader, Header },
};
</script>
<style  scoped>
.baseContainer {
  height: 100%;
  width: 100%;
  position: relative;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

言语稚嫩，希望对你有帮助！

鱼鱼鱼BOL
关注
Vue3 Element Plus el-container不生效问题
艺海拾贝
11-26 966
Vue3 Element Plus样式不正确问题解决
Vue2/Vue3 + 二次开发富文本（ueditor-plus/vue-ueditor-wrap）控制视频大小 图片大小px 用老版百度ueditor对齐方式
qq_44652860的博客
12-08 1085
客户要求 富文本实现图片大小手动 控制 视频大小手动控制 试了很多富文本控件 不是功能不完整就是大小控制不到细节px 只能控制% vue可选有限 可能是我菜🤣 没有找到好用的 有好使的可以留言哈。废话不多说上菜。提示：以下是本篇文章正文内容，下面案例可供参考。
Vue3使用elementUI Plus中的el-container布局容器时不能撑开页面的解决方案
qq_61567032的博客
08-25 4316
使用el-container让Aside、Main、Header等部分充满屏幕的解决办法
Vue3集成Element Plus完整指南：从安装到主题定制下-实现后台管理系统框架搭建
最新发布
p6448777的博客
05-24 1660
本文介绍了基于Vue3构建综合管理系统的完整方案。系统采用VueRouter4配置嵌套路由，包含主页、关于页和404处理；主页面采用头部+侧边栏+内容区的经典布局，使用ElementPlus组件实现导航菜单、用户信息展示等功能；数据展示页面集成了查询表单、操作按钮、数据表格和分页组件。文章详细说明了路由配置、页面布局、组件集成和样式定制等关键技术点，并建议扩展路由守卫、Axios数据请求、Pinia状态管理等功能。该模板为企业级管理系统提供了可扩展的基础框架。
Vue中引入elementUI中的container组件失效
weixin_42171832的博客
06-02 501
1.不用修改官网中任何css或者html。2.按需引入，不是只是引入官网的就可以。
vue3引入elementplus后使用布局容器不生效
qq_50487743的博客
08-09 6928
vue3
解决vue3使用Container 布局容器不生效
qq_52014705的博客
01-15 1640
解决vue3使用Container 布局容器不生效
elementPlus 使用container布局容器不当导致内容不加载，无效，不显示
m0_62170162的博客
04-18 1008
el-aside等子组件必须以el-container为亲元素，即使是把el-aside放在子路由组件，然后再引入也不行。
【Vue3-ElementPlus】关于v-loading不生效以及控制台输出[Vue warn]: Failed to resolve directive: loading 的问题
weixin_44733774的博客
12-11 4119
在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句，然后v-loading指令就能正常使用了。
前端实战：Vue3+ElementPlus+ECharts实现后台管理系统
qq_22910257的博客
01-07 1718
本次课程带领大家使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，主页布局和导航条功能，客户和保单管理功能，分页展示功能，表单添加功能，报表生成功能等。使用axios调用远程接口，使用Apifox模拟远程接口，使用vuex存储登录信息。
记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑
m0_67401761的博客
03-07 4561
事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。 于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和ele
elementUI container布局不生效解决办法
Sys_菜菜
06-21 1万+
大晚上的查这个查了半个多小时，不行我一定要写博客把这个坑记录下。 <el-container direction="vertical"> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</e
VUE3中布局失效，页面无法显示
2302_76268155的博客
03-01 1567
我再使用以前我写的项目发现是可以运行的，我在重复删除项目和创建项目后我仍然无法解决问题。于是我突发奇想吧main.js中的文件改为可以运行的发现结果就可以运行了。在vue3项目中我们对main.js中对每个依赖的引入顺序会影响我们项目的运行。总结：本文只是对一个问题的简单解决，一个问题可能问题产生的效果一样，但是存在的问题可能不一样。有对这类问题的详细解释的原因，欢迎大家一起讨论，一起进步。可见没有任何显示的效果，这对我想用的的组件也产生了影响，完全无法使用。这就可以解决这个问题，这只是大致的解决方案。
vue+ElementPlus框架Container 布局容器不能铺满整个屏幕
enjoyenjoy576423146的博客
04-10 8483
直接使用ElementPlus框架的Container 布局容器，在页面中没有铺满，查看可知，有padding20px，高度也只有一半，因此添加了scc。
ABAP-GUI的导出到excel的系统自带按钮
weixin_42559610的博客
09-11 1019
按钮&XXL
vue3 elementplus使用container布局容器 scroll 失效问题
weixin_44536001的博客
06-05 958
当项目中的layout页面使用了container布局后 此时在展示页面中添加window.addEventListener("scroll")事件和document.body.scrollTop 相关都会失效，原因是因为具体的滚动是在el-mian元素上执行的我们需要在这个元素添加相关的监听操作。
Vue3+Element-Plus 主页布局功能功能开发 二二
热门推荐
build2024
12-01 1万+
1.最终布局效果 2. 布局分析：先上下划分，再左右划分 3. 整个主页布局需要使用到element-plus 里面的一些布局组件 ，分别是： <el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 C...
从零开始Vue3+Element Plus的后台管理系统(二)——Layout页面布局的实现
immocha的博客
05-15 1万+
项目搭建好之后，开始写基本的布局。后台管理系统的布局3大元素：头部、侧栏、主要内容，各种布局结构相差不大，我选择了下图所示的布局，其中头部、侧栏、页签在页面中是固定的，只有主要内容容器会跟随页面滚动。
3、element-Plus搭建布局页
weixin_51915021的博客
05-05 1772
Vue3 + .net core6 WebAPI前后端分离
使用ant-design-vue呢，怎么实现列表功能
05-08
<think>好的，用户现在想了解如何使用ant-design-vue实现列表功能。首先，我需要回顾用户之前的问题和我的回答。用户之前问过关于Vue文件管理系统的问题，我提供了使用Element Plus的示例代码。现在用户提到ant-design-vue，可能需要类似的列表实现，但使用不同的UI库。 用户提到参考了一个引用，关于ant-design-vue在uniapp中的使用问题，但auto-import失败。不过用户现在的问题是关于列表功能的实现，所以可能不需要深入讨论构建问题，但需要注意避免自动导入的问题，可能需要手动导入组件。 用户的需求是使用ant-design-vue实现列表，可能包括基本列表展示、分页、搜索、操作按钮等。需要参考ant-design-vue的文档，找到对应的列表组件，比如a-list，a-list-item等。同时，用户之前的示例中使用了Element Plus的表格和上传组件，可能需要对比antd的类似组件。 需要考虑用户的代码结构，是否使用Vue3的组合式API，是否需要按需导入组件，避免全局引入导致的构建问题。在引用中提到用户遇到build失败的问题，可能是因为自动导入的问题，所以在回答中应建议手动导入所需的antd组件，避免依赖自动导入插件。 此外，用户可能需要示例代码，展示如何用ant-design-vue的列表组件实现基本功能，包括数据绑定、分页处理、操作按钮的事件处理等。还需要注意样式和响应式布局，可能使用antd的栅格系统。 可能还需要提到常见问题的解决方案，比如分页配置、加载状态处理、空状态显示，以及如何与后端API集成，实现数据的动态加载。同时，可以建议一些优化点，比如虚拟滚动优化大数据量列表，或者使用搜索过滤功能。 需要确保代码示例正确，语法符合Vue3和ant-design-vue的最新用法，比如使用setup语法糖，正确绑定事件和属性。另外，要提醒用户安装正确的ant-design-vue版本，并配置vite的按需导入（如果适用），但根据用户之前的引用，可能需要避免自动导入的问题，所以手动导入更可靠。 最后，总结实现步骤，分点说明，保持结构清晰，方便用户理解。可能还需要比较ant-design-vue和Element Plus在列表实现上的不同，帮助用户迁移或选择合适的方法。</think>以下是使用 `ant-design-vue` 实现列表功能的完整方案，包含基本列表、分页、搜索和操作功能，采用 Vue 3 组合式 API 开发： ```vue <template> <div class="list-container"> <!-- 搜索框 --> <a-input-search v-model:value="searchKey" placeholder="输入关键词搜索" @search="handleSearch" class="search-box" /> <!-- 主列表 --> <a-list :data-source="filteredData" :loading="loading" :pagination="pagination" item-layout="horizontal" > <template #renderItem="{ item }"> <a-list-item :actions="getActions(item)"> <!-- 列表项内容 --> <a-list-item-meta :description="item.description" > <template #title> <a href="#">{{ item.title }}</a> </template> <template #avatar> <a-avatar :src="item.avatar" /> </template> </a-list-item-meta> <!-- 附加内容 --> <div class="content-wrapper"> <span class="time">{{ formatTime(item.createTime) }}</span> <a-tag v-if="item.status" :color="statusColorMap[item.status]"> {{ item.status }} </a-tag> </div> </a-list-item> </template> </a-list> </div> </template> <script setup> import { ref, reactive, computed } from 'vue'; import { List, ListItem, ListItemMeta, Avatar, Tag, Input, message } from 'ant-design-vue'; // 手动导入所需组件（避免自动导入问题） const AList = List; const AListItem = ListItem; const AListItemMeta = ListItemMeta; const AAvatar = Avatar; const ATag = Tag; const AInputSearch = Input.Search; // 模拟数据 const rawData = ref([ { id: 1, title: 'Ant Design Vue 入门指南', description: '包含基础组件使用指南', avatar: 'https://example.com/avatar1.png', createTime: '2024-03-20', status: 'published' }, // 更多数据... ]); // 状态管理 const searchKey = ref(''); const loading = ref(false); const pagination = reactive({ current: 1, pageSize: 10, total: 0, showSizeChanger: true, onChange: (page) => { pagination.current = page; } }); // 状态颜色映射 const statusColorMap = { published: 'green', draft: 'orange', deleted: 'red' }; // 计算属性：过滤后的数据 const filteredData = computed(() => { return rawData.value.filter(item => item.title.includes(searchKey.value) || item.description.includes(searchKey.value) ); }); // 操作按钮配置 const getActions = (item) => [ <a key="edit" onClick={() => handleEdit(item)}>编辑</a>, <a key="delete" onClick={() => handleDelete(item.id)}>删除</a> ]; // 时间格式化 const formatTime = (time) => { return new Date(time).toLocaleDateString(); }; // 搜索处理 const handleSearch = () => { // 实际项目需调用API loading.value = true; setTimeout(() => { loading.value = false; }, 500); }; // 删除操作 const handleDelete = (id) => { rawData.value = rawData.value.filter(item => item.id !== id); message.success('删除成功'); }; // 编辑操作 const handleEdit = (item) => { // 打开编辑模态框逻辑 console.log('编辑项目:', item); }; </script> <style scoped> .list-container { max-width: 800px; margin: 0 auto; padding: 20px; } .search-box { margin-bottom: 24px; max-width: 400px; } .content-wrapper { display: flex; align-items: center; gap: 12px; } .time { color: rgba(0, 0, 0, 0.45); } </style> ``` ### 核心功能实现说明： 1. **列表组件选择**：使用 `a-list` + `a-list-item` 组合构建基础列表结构[^1] 2. **分页控制**：通过 `pagination` 属性配置分页参数，支持动态调整页码和页大小 3. **搜索功能**：集成 `a-input-search` 实现关键词过滤，结合计算属性优化性能 4. **数据展示优化**： - 使用 `a-avatar` 展示头像 - 通过 `a-tag` 显示状态标签 - 时间格式化显示 5. **操作交互**：在列表项右侧配置编辑/删除按钮，使用 JSX 语法动态生成操作项[^2] ### 最佳实践建议： 1. **组件按需导入**：手动导入所需组件避免自动导入问题（参考你提到的构建问题） ```javascript // 正确导入方式 import { List } from 'ant-design-vue'; const AList = List; ``` 2. **大数据量优化**：当数据量超过 1000 条时，建议： ```vue <a-list :virtual="true" :height="500" :item-height="73" > ``` 3. **空状态处理**：添加空状态提示 ```vue <template #empty> <a-empty description="暂无数据" /> </template> ``` 4. **API 集成示例**： ```javascript const fetchData = async () => { try { const res = await axios.get('/api/list', { params: { page: pagination.current, pageSize: pagination.pageSize } }); rawData.value = res.data; } catch (error) { message.error('数据加载失败'); } }; ``` ### 常见问题解决方案： 1. **样式丢失问题**：确保正确导入 antd 样式 ```javascript import 'ant-design-vue/dist/antd.css'; // 或按需导入 ``` 2. **分页失效排查**： ```javascript watch(filteredData, (newVal) => { pagination.total = newVal.length; }); ``` 3. **响应式布局**：使用 antd 的栅格系统 ```vue <a-row :gutter="16"> <a-col :span="6" v-for="item in data" :key="item.id"> <!-- 卡片内容 --> </a-col> </a-row> ``` 该实现方案遵循 Ant Design 的设计规范，同时结合 Vue 3 的响应式特性，展示了企业级列表功能的典型实现模式[^3]。实际项目中需要根据业务需求添加排序、筛选、批量操作等扩展功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值