ElementUI +++ Echarts面试题答案汇总

官网地址：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. 渲染图表：调用实例对象的方法，对图表进行渲染，将其展示在页面上。