一、element-ui

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页面快速布局和构建

官网: http://element-cn.eleme.io/#/zh-CN

二、element-ui实例

1、引入脚本库

在axios_pro文件夹中引入:element-ui\lib

2、引入css

在axios.html 的head中引入css

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

3、引入js

<script src="element-ui/lib/index.js"></script>

4、渲染讲师列表

注意:项目中的版本是2.4,参考对应版本的文档

<div id="app">
<el-button>添加</el-button>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-table
:data="teacherList"
stripe
border
style="width: 100%"> <el-table-column
type="selection"
width="55"></el-table-column> <el-table-column
prop="name"
label="姓名"></el-table-column> <el-table-column
prop="gmtCreate"
label="入驻日期"></el-table-column> <el-table-column
label="级别">
<template slot-scope="scope">
{{ scope.row.level === 1?'高级讲师':'首席讲师' }}
</template>
</el-table-column>
</el-table>
</div>

5、浏览器中运行

前端知识(一)06 element-ui-谷粒学院的更多相关文章

  1. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  2. Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  3. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  4. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  5. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  6. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  7. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  9. Web前端知识技能大汇总

    项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以 ...

随机推荐

  1. [日常摸鱼]pojKaka's Matrix Travels-拆点+最大费最大流

    方格取数的升级版,每个格子最多取一次. $k=1$的话就是个普及组的dp题,$k=2$就是在之前的基础上多加两维. 然而现在$k$太大了当然就不dp啦 对于$k=1$的情况我们还可以把$(i,j)$向 ...

  2. Web服务器-并发服务器-协程 (3.4.2)

    @ 目录 1.分析 2.代码 关于作者 1.分析 随着网站的用户量越来愈多,通过多进程多线程的会力不从心 使用协程可以缓解这一问题 只要使用gevent实现 2.代码 from socket impo ...

  3. MyBatis 与 Spring 的完美整合方法

    MyBaits 整合 Spring MyBatis-Spring 项目 第一步:创建测试工程 第二步:引入依赖 jar 包 第三步:编写 Spring 配置文件 第四步:编写 MyBatis 配置文件 ...

  4. 【k8s实战一】Jenkins 部署应用到 Kubernetes

    [k8s实战一]Jenkins 部署应用到 Kubernetes 01 本文主旨 目标是演示整个Jenkins从源码构建镜像到部署镜像到Kubernetes集群过程. 为了简化流程与容易重现文中效果, ...

  5. Python循环列表的方法

    python循环列表的几种方法: 第一,依次打印列表中的各项值. 1 #!usr/bin/env python3 2 #!-*- Coding:utf-8 -*- 3 4 ''' 5 多种循环列表的方 ...

  6. Redis基础篇(二)高性能IO模型

    我们经常听到说Redis是单线程的,也会有疑问:为什么单线程的Redis能那么快? 这里要明白一点:Redis是单线程,主要是指Redis的网络IO和键值对读写是由一个线程来完成的,这也是Redis对 ...

  7. 【linux】系统编程-2-消息队列

    目录 前言 4. 消息队列 4.1 概念 4.2 对比 4.3 函数及使用流程 4.3.1 msgget() 4.3.2 msgsng() 4.3.3 msgrcv() 4.3.4 msgctl() ...

  8. [leetcode] Add to List 74. Search a 2D Matrix

    /** * Created by lvhao on 2017/8/1. * Write an efficient algorithm that searches for a value in an m ...

  9. 如何定位CPU瓶颈?

    CPU是通常大家最先关注的性能指标,宏观维度有核的CPU使用率,微观有函数的CPU cycle数,根据性能的模型,性能规格与CPU使用率是互相关联的,规格越高,CPU使用率越高,但是处理器的性能往往又 ...

  10. vue中使用AES.js和crypto.js加密

    一:crypto-js加密 1.1:安装依赖 npm install crypto-js --save-dev 1.2 :在项目目录上创建一个js文件里面写入加密,解密的代码 mport Crypto ...