ElementUI组件库怎么使用
导读：本文共6639字符，通常情况下阅读需要22分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：这篇“ElementUI组件库怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“ElementUI组件库怎么使用”文章吧。ElementUI介绍ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。这篇“ElementUI组件库怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“ElementUI组件库怎么使用”文章吧。
ElementUI介绍
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
在页面上引入 js 和 css 文件即可开始使用，如下：
<!--引入ElementUI样式--><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><!--引入ElementUI组件库--><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>
Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列
<el-header>：顶栏容器
<el-aside>：侧边栏容器
<el-main>：主要区域容器
<el-footer>：底栏容器
<body><divid="app"><el-container><el-header>Header</el-header><el-container><el-asidewidth="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div><style>.el-header,.el-footer{background-color:#B3C0D1;color:#333;text-align:left;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:590px;}</style></body><script>newVue({el:'#app'});</script>Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
<el-dropdownsplit-buttonsize="small"trigger="click">个人中心<el-dropdown-menu><el-dropdown-item>退出系统</el-dropdown-item><el-dropdown-itemdivided>修改密码</el-dropdown-item><el-dropdown-itemdivided>联系管理员</el-dropdown-item></el-dropdown-menu></el-dropdown>
NavMenu 导航菜单
为网站提供导航功能的菜单。
<el-menu><el-submenuindex="1"><templateslot="title"><iclass="el-icon-location"></i><spanslot="title">导航一</span></template><el-menu-item>选项1</el-menu-item><el-menu-item>选项2</el-menu-item><el-menu-item>选项3</el-menu-item></el-submenu><el-submenuindex="2"><templateslot="title"><iclass="el-icon-menu"></i><spanslot="title">导航二</span></template><el-menu-item>选项1</el-menu-item><el-menu-item>选项2</el-menu-item><el-menu-item>选项3</el-menu-item></el-submenu></el-menu>
Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
<el-table:data="tableData"stripe><el-table-columnprop="date"label="日期"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnlabel="操作"align="center"><!-- slot-scope：作用域插槽，可以获取表格数据 scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法--><templateslot-scope="scope"><el-buttontype="primary"size="mini"@click="handleUpdate(scope.row)">编辑</el-button><el-buttontype="danger"size="mini"@click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><script>newVue({el:'#app',data:{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1519弄'}]},methods:{handleUpdate(row){alert(row.date);},handleDelete(row){alert(row.date);}}});</script>Pagination 分页
当数据量过多时，使用分页分解数据。
<!-- current-change：内置的事件，当前页码改变时会触发，可以获取到改变之后的页码--><el-pagination@current-change="handleCurrentChange"current-page="5"page-size="10"layout="total,prev,pager,next,jumper":total="305"></el-pagination><script>newVue({el:'#app',methods:{handleCurrentChange(page){alert(page);}}});</script>Message 消息提示
常用于主动操作后的反馈提示。
<el-button:plain="true"@click="open1">消息</el-button><el-button:plain="true"@click="open2">成功</el-button><el-button:plain="true"@click="open3">警告</el-button><el-button:plain="true"@click="open4">错误</el-button><script>newVue({el:'#app',methods:{open1(){this.$message('这是一条消息提示');},open2(){this.$message({message:'恭喜你，这是一条成功消息',type:'success'});},open3(){this.$message({message:'警告哦，这是一条警告消息',type:'warning'});},open4(){this.$message.error('错了哦，这是一条错误消息');}}})</script>Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
<h4>基础的、简洁的标签页</h4><!-- 通过value属性来指定当前选中的标签页--><el-tabsvalue="first"><el-tab-panelabel="用户管理"name="first">用户管理</el-tab-pane><el-tab-panelabel="配置管理"name="second">配置管理</el-tab-pane><el-tab-panelabel="角色管理"name="third">角色管理</el-tab-pane><el-tab-panelabel="定时任务补偿"name="fourth">定时任务补偿</el-tab-pane></el-tabs><h4>选项卡样式的标签页</h4><el-tabsvalue="first"type="card"><el-tab-panelabel="用户管理"name="first">用户管理</el-tab-pane><el-tab-panelabel="配置管理"name="second">配置管理</el-tab-pane><el-tab-panelabel="角色管理"name="third">角色管理</el-tab-pane><el-tab-panelabel="定时任务补偿"name="fourth">定时任务补偿</el-tab-pane></el-tabs><h4>卡片化的标签页</h4><el-tabsvalue="first"type="border-card"><el-tab-panelabel="用户管理"name="first">用户管理</el-tab-pane><el-tab-panelabel="配置管理"name="second">配置管理</el-tab-pane><el-tab-panelabel="角色管理"name="third">角色管理</el-tab-pane><el-tab-panelabel="定时任务补偿"name="fourth">定时任务补偿</el-tab-pane></el-tabs><script>newVue({el:'#app'})</script>Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
<!-- rules：表单验证规则--><el-formref="form":model="form":rules="rules"label-width="80px"><!-- prop：表单域model字段，在使用validate、resetFields方法的情况下，该属性是必填的--><el-form-itemlabel="活动名称"prop="name"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="活动区域"prop="region"><el-selectv-model="form.region"placeholder="请选择活动区域"><el-optionlabel="区域一"value="shanghai"></el-option><el-optionlabel="区域二"value="beijing"></el-option></el-select></el-form-item><el-form-itemlabel="活动时间"><el-col:span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="form.date1"style="width:100%;"></el-date-picker></el-col><el-colclass="line":span="2">-</el-col><el-col:span="11"><el-time-pickertype="fixed-time"placeholder="选择时间"v-model="form.date2"style="width:100%;"></el-time-picker></el-col></el-form-item><el-form-itemlabel="即时配送"><el-switchv-model="form.delivery"></el-switch></el-form-item><el-form-itemlabel="活动性质"><el-checkbox-groupv-model="form.type"><el-checkboxlabel="美食/餐厅线上活动"name="type"></el-checkbox><el-checkboxlabel="地推活动"name="type"></el-checkbox><el-checkboxlabel="线下主题活动"name="type"></el-checkbox><el-checkboxlabel="单纯品牌曝光"name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-itemlabel="特殊资源"><el-radio-groupv-model="form.resource"><el-radiolabel="线上品牌商赞助"></el-radio><el-radiolabel="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-itemlabel="活动形式"><el-inputtype="textarea"v-model="form.desc"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="onSubmit">立即创建</el-button></el-form-item></el-form><script>newVue({el:'#app',data:{form:{name:'',region:'',date1:'',date2:'',delivery:false,type:[],resource:'',desc:''},//定义校验规则rules:{name:[{required:true,message:'请输入活动名称',trigger:'blur'},{min:3,max:5,message:'长度在3到5个字符',trigger:'blur'}],region:[{required:true,message:'请选择活动区域',trigger:'change'}]}},methods:{onSubmit(){console.log(this.form);//validate：对整个表单进行校验的方法，参数为一个回调函数。//该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。this.$refs['form'].validate((valid)=>{if(valid){alert('submit!');}else{console.log('errorsubmit!!');returnfalse;}});}}})</script>以上就是关于“ElementUI组件库怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
本文：
ElementUI组件库怎么使用的详细内容，希望对您有所帮助，信息来源于网络。