官网地址:http://element-cn.eleme.io/#/zh-CN
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
ElementUi是怎么做表单验证的?在循环里对每个input验证怎么做呢?
model 绑定表单数据,通过prop取表单数值,通过编写ref进行后台API验证 ,根据rules进行表单内容验证
ElementUI表格组件如何实现动态表头?
<template v-for="item in tableColownms"> <el-table-column v-if="item.type!='hidden'" :key="item.id" :prop="item.field" sortable :label="item.label"> </template>
Dropdown 下拉菜单将动作或菜单折叠到下拉菜单中。
<el-dropdown split-button size="small" trigger="click">个人中心<el-dropdown-menu><el-dropdown-item>退出系统</el-dropdown-item><el-dropdown-item divided>修改密码</el-dropdown-item><el-dropdown-item divided>联系管理员</el-dropdown-item></el-dropdown-menu> </el-dropdown>
3 NavMenu 导航菜单为网站提供导航功能的菜单。
<el-menu><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="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-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="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>
常用组件
<el-menu>:导航菜单
<el-submenu index="1">:导航按钮
<template slot="title">标题和名称
<i class="el-icon-menu">图标
<span slot="title">导航二</span>:导航标题
<el-menu-item>导航项
<el-dropdown split-butto>:下拉按钮
<el-dropdown-menu>下拉菜单
<el-dropdown-item>下拉项<el‐container>:外层容器。当子元素中包含 <el‐header> 或 <el‐footer> 时,全部子元素会垂直上下排列,否则会水平左右排列
<el‐header>:顶栏容器
<el‐aside>:侧边栏容器
<el‐main>:主要区域容器
<el‐footer>:底栏容器
Echarts
什么是 Echarts
Echarts是一款基于JavaScript的开源图表库,它能够帮助我们快速、简单地创建各种各样的图表和实现数据可视化。
Echarts具有以下特性:
1. 支持多种图表类型:Echarts提供了丰富的图表类型,如折线图、柱状图、饼图、雷达图、散点图等,满足不同场景的需求。
2. 强大的交互能力:Echarts支持图表的缩放、拖拽、点击等交互操作,用户可以根据需求自由操作图表。
3. 可定制化:Echarts提供了丰富的配置选项,可以自定义图表的样式、颜色、标签等。
4. 数据驱动:使用Echarts,我们可以将数据与图表进行绑定,数据的更新可以自动反映在图表上。
5. 跨平台支持:Echarts可以在不同的浏览器和设备上运行,兼容性良好。
Echarts的基本用法包括以下几个步骤:
1. 引入Echarts库:在HTML文件中引入Echarts的JS文件。
2. 创建图表容器:在HTML中创建一个具有一定尺寸的div容器,用于展示图表。
3. 初始化图表:使用Echarts提供的初始化方法,将图表容器和一个新创建的实例对象关联起来。
4. 配置图表参数:通过设置实例对象的option属性,可以对图表进行各种配置,例如选择图表类型、设置数据、调整样式等。
5. 渲染图表:调用实例对象的方法,对图表进行渲染,将其展示在页面上。