elementui块
ElementUI 块状组件与布局
ElementUI 提供多种块状组件和布局方式，适用于快速构建中后台系统界面。以下为关键组件及用法说明：
布局容器 (Container)
通过 <el-container> 嵌套 <el-header>, <el-aside>, <el-main>, <el-footer> 实现整体布局框架：
<el-container>
<el-header>顶部导航栏</el-header>
<el-container>
<el-aside width="200px">侧边菜单</el-aside>
<el-main>主内容区</el-main>
</el-container>
</el-container>卡片 (Card)
<el-card> 提供带阴影的容器区块，支持标题和操作按钮：
<el-card
header="卡片标题"
shadow="hover">
<div v-for="item in list" :key="item.id">{{ item.content }}</div>
<template #footer>底部操作区</template>
</el-card>分割线 (Divider)
<el-divider> 用于内容分隔，支持文字居中：
<el-divider content-position="left">左侧标题</el-divider>
<section>内容区块A</section>
<el-divider />
<section>内容区块B</section>折叠面板 (Collapse)
<el-collapse> 实现可折叠内容区块：
<el-collapse v-model="activeNames">
<el-collapse-item title="标题1" name="1">
<div>可折叠内容</div>
</el-collapse-item>
</el-collapse>时间线 (Timeline)
<el-timeline> 展示时间序列信息：
<el-timeline>
<el-timeline-item timestamp="2023/1/1">事件A</el-timeline-item>
<el-timeline-item timestamp="2023/2/1" type="success">事件B</el-timeline-item>
</el-timeline>栅格系统 (Layout)
通过 <el-row> 和 <el-col> 实现响应式布局：
<el-row :gutter="20">
<el-col :span="6"><div>左侧内容</div></el-col>
<el-col :span="18"><div>右侧内容</div></el-col>
</el-row>注意事项
- 使用布局组件时需确保引入对应 CSS 样式文件
- 栅格系统的
gutter属性建议设置为 20 的倍数 - 卡片组件可通过
body-style属性自定义内边距 - 时间线组件支持通过
hide-timestamp隐藏时间标记
以上组件均可通过官方文档查看完整 API 和示例代码。
