ElementUI的简单学习(一文快速上手ElementUI)

  • 页内目录
    一,Elenment介绍
    二,基于CDN配置ElementUI
    三,测试是否成功
    四,简单使用Element提供的标签
    五,结合ElementUI实现一个表格
      表格属性分类
      表格斑马线样式实现
      文本居中演示
      分析问题+性别格式化演示
      结合类选择器修改表头样式
      添加复选框
      增加操作栏,修改和删除按钮
      增加延迟加载图标
      表单实现增加用户窗体
    六,全代码

一,Elenment介绍

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,说白了就是美化界面,然后简洁代码的一个另类标签的使用;
ElementUI是基于Vue实现的;
使用Vue对html的标签做了重写;

二,基于CDN配置ElementUI(因此组件是以在线获取的方式,所以需要网络支撑)

  1. 进入官网Element官网复制样式表链接标签
    ElementUI的简单学习(一文快速上手ElementUI)_第1张图片
  2. 引入样式表标签如图ElementUI的简单学习(一文快速上手ElementUI)_第2张图片
  3. 引入组件库
    ElementUI的简单学习(一文快速上手ElementUI)_第3张图片
  4. 引入组件库标签
    在这里插入图片描述

三,测试是否成功

  1. 引入一个button测试
    ElementUI的简单学习(一文快速上手ElementUI)_第4张图片
  2. 放入html界面的div标签中测试,(在IDEA需要运行服务器否则界面不会实时刷新)(这里小编前面运用Vue和Axios实现了表格的显示基于以上继续进行,当然也不妨碍你直接学习该章)得到了如图:
    ElementUI的简单学习(一文快速上手ElementUI)_第5张图片

四,简单使用Element提供的标签

整合Element标签:
  1. 在组件库中寻找table合适的标签复制