前端知识(一)06 element-ui-谷粒学院

目录

• 一、element-ui
• 二、element-ui实例
  • 1、引入脚本库
  • 2、引入css
  • 3、引入js
  • 4、渲染讲师列表
  • 5、浏览器中运行

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

5、浏览器中运行