一、element-ui
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页面快速布局和构建
官网: http://element-cn.eleme.io/#/zh-CN
二、element-ui实例
1、引入脚本库
在axios_pro文件夹中引入:element-uilib
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=" 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>