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

本文介绍了ElementUI,一套基于Vue2.0的组件库,涉及表单验证、动态表头和导航菜单的使用。同时,还讲解了Echarts,一个强大的JavaScript图表库,用于数据可视化,包括其特点和基本用法。
摘要由CSDN通过智能技术生成
官网地址: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. 渲染图表:调用实例对象的方法,对图表进行渲染,将其展示在页面上。

 

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值