elementui块

ElementUI 块的概念与应用

ElementUI 是一个基于 Vue.js 的组件库，提供丰富的 UI 组件用于快速构建前端界面。"块"通常指组件或布局模块，以下是 ElementUI 中常见的块（组件）分类及使用方法。

布局块

Container 布局容器
用于整体页面框架设计，包含 <el-container>、<el-header>、<el-aside> 等子组件。

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

Grid 栅格系统
通过 <el-row> 和 <el-col> 实现响应式布局。

<el-row :gutter="20">
  <el-col :span="12"><div>左侧内容</div></el-col>
  <el-col :span="12"><div>右侧内容</div></el-col>
</el-row>

表单块

Form 表单
包含表单验证、动态字段等功能。

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

Table 表格
支持排序、分页、自定义列等。

<el-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>

交互块

Dialog 对话框
通过 visible.sync 控制显示/隐藏。

<el-dialog title="提示" :visible.sync="dialogVisible">
  <span>内容</span>
</el-dialog>

Message 消息提示
非组件形式的全局调用。

this.$message.success('操作成功');

导航块

Menu 菜单
支持横向、纵向导航。

<el-menu mode="horizontal">
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template slot="title">产品</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
  </el-submenu>
</el-menu>

自定义块

通过插槽（Slot）或扩展组件实现自定义内容。例如：

<el-card>
  <div slot="header">自定义标题</div>
  <div>自定义内容区域</div>
</el-card>

注意事项

• 按需引入组件以优化体积。
• 主题色可通过 SCSS 变量覆盖（如 $--color-primary）。
• 兼容性需匹配 Vue 2.x 版本（ElementUI 3.x）。