登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

豆瓜网 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›ElementUI快速入门

ElementUI快速入门

篁瞑普 2025-5-30 12:16:06
　　一、ElementUI介绍


ElementUI是一套基于VUE2.X的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网地址：https://element.eleme.cn/#/zh-CN/component/installation
　　二、常用组件


　　2.1 Container 布局容器


用于布局的容器组件，方便快速搭建页面的基本结构：
：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
：顶栏容器。
：侧边栏容器。
：主要区域容器。
：底栏容器。
 
  1. <body>
  2.   
  3.     <el-container>
  4.       <el-header>Header</el-header>
  5.       <el-container>
  6.         <el-aside width="200px">Aside</el-aside>
  7.         <el-container>
  8.           <el-main>Main</el-main>
  9.           <el-footer>Footer</el-footer>
  10.         </el-container>
  11.       </el-container>
  12.     </el-container>
  13.   
  14.   
  15. </body>
复制代码
 
 
　　2.2 Dropdown 下拉菜单


将动作或菜单折叠到下拉菜单中。
 
  1. <el-dropdown split-button size="small" trigger="click">
  2.   个人中心
  3.   <el-dropdown-menu>
  4.     <el-dropdown-item >退出系统</el-dropdown-item>
  5.     <el-dropdown-item divided>修改密码</el-dropdown-item>
  6.     <el-dropdown-item divided>联系管理员</el-dropdown-item>
  7.   </el-dropdown-menu>
  8. </el-dropdown>
复制代码
 

　　2.3 NavMenu 导航菜单


为网站提供导航功能的菜单。
 
  1. <el-menu>
  2.   <el-submenu index="1">
  3.     <template slot="title">
  4.       <i class="el-icon-location"></i>
  5.       <span slot="title">导航一</span>
  6.     </template>
  7.     <el-menu-item>选项1</el-menu-item>
  8.     <el-menu-item>选项2</el-menu-item>
  9.     <el-menu-item>选项3</el-menu-item>
  10.   </el-submenu>
  11.   <el-submenu index="2">
  12.     <template slot="title">
  13.       <i class="el-icon-menu"></i>
  14.       <span slot="title">导航二</span>
  15.     </template>
  16.     <el-menu-item>选项1</el-menu-item>
  17.     <el-menu-item>选项2</el-menu-item>
  18.     <el-menu-item>选项3</el-menu-item>
  19.   </el-submenu>
  20. </el-menu>
复制代码
 
 
　　2.4 Table 表格


用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
 
  1. <el-table :data="tableData" stripe>
  2.   <el-table-column prop="date" label="日期"></el-table-column>
  3.   <el-table-column prop="name" label="姓名"></el-table-column>
  4.   <el-table-column prop="address" label="地址"></el-table-column>
  5.   <el-table-column label="操作" align="center">
  6.    
  7.     <template slot-scope="scope">
  8.       <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
  9.       <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
  10.     </template>
  11.   </el-table-column>
  12. </el-table>
复制代码
 
 
　　2.5 Pagination 分页


当数据量过多时，使用分页分解数据。
 
  1. [/code] 
  2.  
  3. [size=5]　　2.6 Message 消息提示[/size]
  5.  
  7. 常用于主动操作后的反馈提示。
  8.  
  9. [code]<el-button :plain="true" @click="open1">消息</el-button>
  10. <el-button :plain="true" @click="open2">成功</el-button>
  11. <el-button :plain="true" @click="open3">警告</el-button>
  12. <el-button :plain="true" @click="open4">错误</el-button>
复制代码
 
 

　　2.7 Tabs 标签页


分隔内容上有关联但属于不同类别的数据集合。
 
  1. <h3>基础的、简洁的标签页</h3>
  3. <el-tabs value="first">
  4.   <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  5.   <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  6.   <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  7.   <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  8. </el-tabs>
  9. <h3>选项卡样式的标签页</h3>
  10. <el-tabs value="first" type="card">
  11.   <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  12.   <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  13.   <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  14.   <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  15. </el-tabs>
  16. <h3>卡片化的标签页</h3>
  17. <el-tabs value="first" type="border-card">
  18.   <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  19.   <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  20.   <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  21.   <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  22. </el-tabs>
复制代码
 

　　2.8 Form 表单


由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

  1. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  2.   
  3.   <el-form-item label="活动名称" prop="name">
  4.     <el-input v-model="form.name"></el-input>
  5.   </el-form-item>
  6.   <el-form-item label="活动区域" prop="region">
  7.     <el-select v-model="form.region" placeholder="请选择活动区域">
  8.       <el-option label="区域一" value="shanghai"></el-option>
  9.       <el-option label="区域二" value="beijing"></el-option>
  10.     </el-select>
  11.   </el-form-item>
  12.   <el-form-item label="活动时间">
  13.     <el-col :span="11">
  14.       <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  15.     </el-col>
  16.     <el-col class="line" :span="2">-</el-col>
  17.     <el-col :span="11">
  18.       <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
  19.     </el-col>
  20.   </el-form-item>
  21.   <el-form-item label="即时配送">
  22.     <el-switch v-model="form.delivery"></el-switch>
  23.   </el-form-item>
  24.   <el-form-item label="活动性质">
  25.     <el-checkbox-group v-model="form.type">
  26.       <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  27.       <el-checkbox label="地推活动" name="type"></el-checkbox>
  28.       <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  29.       <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  30.     </el-checkbox-group>
  31.   </el-form-item>
  32.   <el-form-item label="特殊资源">
  33.     <el-radio-group v-model="form.resource">
  34.       <el-radio label="线上品牌商赞助"></el-radio>
  35.       <el-radio label="线下场地免费"></el-radio>
  36.     </el-radio-group>
  37.   </el-form-item>
  38.   <el-form-item label="活动形式">
  39.     <el-input type="textarea" v-model="form.desc"></el-input>
  40.   </el-form-item>
  41.   <el-form-item>
  42.     <el-button type="primary" @click="onSubmit">立即创建</el-button>
  43.   </el-form-item>
  44. </el-form>
复制代码
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
ElementUI快速入门

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
篁瞑普
2025-5-30 12:16:06

0

粉丝关注

16

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫