Elementui 中的常用组件
Container 布局容器
Container 布局容器:用于布局的容器组件,方便快速搭建页面的基本结构
<el‐container>:外层容器。当子元素中包含<elheader>或<el‐footer>时,全部子元素会垂直上下排列,否则会水平左右排列<el‐header>:顶栏容器<el‐aside>:侧边栏容器<el‐main>:主要区域容器<el‐footer>:底栏容器
Dropdown 下拉菜单
Dropdown 下拉菜单:将动作或菜单折叠到下拉菜单中
<el-dropdown split-button>:下拉按钮<el-dropdown-menu>下拉菜单<el-dropdown-item>下拉项divided分隔
NavMenu 导航菜单
NavMenu 导航菜单:为网站提供导航功能的菜单
<el-menu>:导航菜单
<el-submenu index="1">:导航按钮
<template slot="title">标题和名称 <i class="el-icon-menu">图标 -
<span slot="title">导航二</span>导航标题
<el-menu-item>导航项
Table 表格
Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或
其他自定义操作
<el-table :data="tableData" stripe>:表格\数据绑定对象\样式<el-table-column prop="date" label="日期">:表格行\数据绑定对象属性\表头
align="center":居中slot-scope:作用域插槽,可以获取表格数据cope:代表表格数据,可以通过scope.row来获取表格当前行数据,scope不是固定写法<el-button type="primary" size="mini"@click="handleUpdate(scope.row)">按钮\类型\大小\事件绑定
Form 表单
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">:表单/绑定数据模板/绑定校验<el-form-item label="活动名称" prop="name">表单项\显示内容\数据模板属性绑定<el-input v-model="ruleForm.name">表单输入框/数据绑定<el-select v-model="ruleForm.region" placeholder="请选择活动区域">:下拉框/数据绑定/提示<el-option label="区域一" value="shanghai"></el-option>:下拉项/数据项ref绑定校验信息- prop 对应 rules 中对应的校验规则字段名
本文详细介绍ElementUI中的常用组件,包括Container布局容器、Dropdown下拉菜单、NavMenu导航菜单、Table表格及Form表单等,帮助读者快速掌握这些组件的使用方法。
685

被折叠的 条评论
为什么被折叠?



