一、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

<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、浏览器中运行

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐