环境搭建
npm 装置
举荐应用 npm 的形式装置，它能更好地和 webpack 打包工具配合应用。
npm i element-ui -SCDN
目前能够通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始应用。
<!-- 引入款式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>咱们倡议应用 CDN 引入 Element 的用户在链接地址上锁定版本，免得未来 Element 降级时受到非兼容性更新的影响。
Hello world
通过 CDN 的形式咱们能够很容易地应用 Element 写出一个 Hello world 页面。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <div id="app"> <el-button @click="visible = true">Button</el-button> <el-dialog :visible.sync="visible" title="Hello world"> <p>Try Element</p> </el-dialog> </div></body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { visible: false } } }) </script></html>Layout 布局
通过根底的 24 分栏，迅速简便地创立布局。
根底布局
应用繁多分栏创立根底的栅格布局。
通过 row 和 col 组件，并通过 col 组件的 span 属性咱们就能够自在地组合布局。
<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row><style> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; }</style>分栏距离
分栏之间存在距离。
Row 组件 提供 gutter 属性来指定每一栏之间的距离，默认距离为 0。
混合布局
通过根底的 1/24 分栏任意扩大组合造成较为简单的混合布局。
<el-row :gutter="20"> <el-col :span="16"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="20"> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="20"> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="16"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col></el-row><style> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; }</style>分栏偏移
反对偏移指定的栏数。
通过制订 col 组件的 offset 属性能够指定分栏偏移的栏数。
<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="20"> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="20"> <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col></el-row><style> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; }</style>对齐形式
通过 flex 布局来对分栏进行灵便的对齐。
将 type 属性赋值为 'flex'，能够启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版形式。
<el-row type="flex" class="row-bg"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="center"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="end"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="space-between"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="space-around"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><style> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; }</style>Container 布局容器
用于布局的容器组件，不便疾速搭建页面的根本构造：
el-container：外层容器。当子元素中蕴含 el-header 或者 el-footer 时，全副子元素会垂直高低排列，否则会程度左右排列。
el-header：顶栏容器。
el-aside：侧边栏容器。
el-main：次要区域容器。
el-footer：底栏容器。
以上组件采纳了 flex 布局，应用前请确定指标浏览器是否兼容。此外，el-container的子元素只能是后四者，后四者的父元素也只能是 el-container。
案例：
<el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container></el-container><style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; }</style><script> export default { data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) } } };</script>button按钮
应用type、plain、round和circle属性来定义 Button 的款式。
<el-row> <el-button>默认按钮</el-button> <el-button type="primary">次要按钮</el-button> <el-button type="success">胜利按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">正告按钮</el-button> <el-button type="danger">危险按钮</el-button></el-row><el-row> <el-button plain>奢侈按钮</el-button> <el-button type="primary" plain>次要按钮</el-button> <el-button type="success" plain>胜利按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>正告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button></el-row><el-row> <el-button round>圆角按钮</el-button> <el-button type="primary" round>次要按钮</el-button> <el-button type="success" round>胜利按钮</el-button> <el-button type="info" round>信息按钮</el-button> <el-button type="warning" round>正告按钮</el-button> <el-button type="danger" round>危险按钮</el-button></el-row><el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button></el-row>Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
常见的表单元素
- 单选框
- 复选框
- 输入框
- 下拉列表框
- 日期选择器
- 文件上传组件
典型表单
包含各种表单项，比方输入框、选择器、开关、单选框、多选框等。
行内表单
当垂直方向空间受限且表单较简略时，能够在一行内搁置表单。
表单验证
在避免用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
自定义校验规定
这个例子中展现了如何应用自定义验证规定来实现明码的二次验证。
告诉
正告框
用于页面中展现重要的提示信息。
<template> <el-alert title="不可敞开的 alert" type="success" :closable="false"> </el-alert> <el-alert title="自定义 close-text" type="info" close-text="晓得了"> </el-alert> <el-alert title="设置了回调的 alert" type="warning" @close="hello"> </el-alert></template><script> export default { methods: { hello() { alert('Hello World!'); } } }</script>加载框
在表格等容器中加载数据时显示.
<template> <el-table v-loading="loading" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table></template><style> body { margin: 0; }</style><script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], loading: true }; } };</script>音讯提示框
从顶部呈现，3 秒后主动隐没。
<template> <el-button :plain="true" @click="open">关上音讯提醒</el-button> <el-button :plain="true" @click="openVn">VNode</el-button></template><script> export default { methods: { open() { this.$message('这是一条音讯提醒'); }, openVn() { const h = this.$createElement; this.$message({ message: h('p', null, [ h('span', null, '内容能够是 '), h('i', { style: 'color: teal' }, 'VNode') ]) }); } } }</script>- 弹框
模拟系统的音讯提示框而实现的一套模态对话框组件，用于音讯提醒、确认音讯和提交内容。
- 告诉
悬浮呈现在页面角落，显示全局的告诉揭示音讯。
Table 表格
用于展现多条构造相似的数据，可对数据进行排序、筛选、比照或其余自定义操作。
根底表格
根底的表格展现用法。
| 日期 | 姓名 | 地址 |
|---|---|---|
| 2016-05-02 | 王小虎 | 上海市普陀区金沙江路 1518 弄 |
|---|---|---|
| 2016-05-04 | 王小虎 | 上海市普陀区金沙江路 1517 弄 |
| 2016-05-01 | 王小虎 | 上海市普陀区金沙江路 1519 弄 |
| 2016-05-03 | 王小虎 | 上海市普陀区金沙江路 1516 弄 |
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。能够应用width属性来定义列宽。
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script>带斑马纹表格
应用带斑马纹的表格，能够更容易辨别出不同行的数据。
| 日期 | 姓名 | 地址 |
|---|---|---|
| 2016-05-02 | 王小虎 | 上海市普陀区金沙江路 1518 弄 |
|---|---|---|
| 2016-05-04 | 王小虎 | 上海市普陀区金沙江路 1517 弄 |
| 2016-05-01 | 王小虎 | 上海市普陀区金沙江路 1519 弄 |
| 2016-05-03 | 王小虎 | 上海市普陀区金沙江路 1516 弄 |
stripe属性能够创立带斑马纹的表格。它承受一个Boolean，默认为false，设置为true即为启用。
<template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table></template><script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } }</script>带边框表格
| 日期 | 姓名 | 地址 |
|---|---|---|
| 2016-05-02 | 王小虎 | 上海市普陀区金沙江路 1518 弄 |
|---|---|---|
| 2016-05-04 | 王小虎 | 上海市普陀区金沙江路 1517 弄 |
| 2016-05-01 | 王小虎 | 上海市普陀区金沙江路 1519 弄 |
| 2016-05-03 | 王小虎 | 上海市普陀区金沙江路 1516 弄 |
默认状况下，Table 组件是不具备竖直方向的边框的，如果须要，能够应用border属性，它承受一个Boolean，设置为true即可启用。
<template> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table></template><script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } }</script>带状态表格
可将表格内容 highlight 显示，不便辨别「胜利、信息、正告、危险」等内容。
Tree 树形控件
用清晰的层级构造展现信息，可开展或折叠。
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }] }, { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' } }; }, methods: { handleNodeClick(data) { console.log(data); } } };</script>NavMenu 导航菜单
为网站提供导航性能的菜单。
侧栏
垂直菜单，可内嵌子菜单。
通过el-menu-item-group组件能够实现菜单进行分组，分组名能够通过title属性间接设定，也能够通过具名 slot 来设定。
<el-row class="tac"> <el-col :span="12"> <h5>默认色彩</h5> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-col> <el-col :span="12"> <h5>自定义色彩</h5> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-col></el-row><script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } }</script>Tag标签
用于标记和抉择。
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type"> {{tag.name}}</el-tag><script> export default { data() { return { tags: [ { name: '标签一', type: '' }, { name: '标签二', type: 'success' }, { name: '标签三', type: 'info' }, { name: '标签四', type: 'warning' }, { name: '标签五', type: 'danger' } ] }; } }</script>综合案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学生列表</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <style> .el-header{ background-color: #545c64; } .header-img{ width: 100px; margin-top:20px; } </style></head><body><div id="div"> <el-container> <!-- 头部--> <el-header class="el-header"> <el-container> <div> <el-image src="img/export.png" class="header-img"></el-image> </div> <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="white" active-text-color="#ffd04b" style="margin-left: auto;"> <el-menu-item index="1">解决核心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="学生列表.html" target="_self">首页</a></el-menu-item> </el-menu> </el-container> </el-header> <!-- 两头局部 --> <el-container style="height: 580px; border: 1px solid #eee"> <!-- 侧边栏 --> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-menu"></i>学工部</template> <el-menu-item-group> <el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生治理</el-menu-item> <el-menu-item index="1-2"><i class="el-icon-help"></i>学生降级/留级</el-menu-item> <el-menu-item index="1-3"><i class="el-icon-help"></i>学生待业状况</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>咨询部</template> <el-menu-item-group> <el-menu-item index="2-1"><i class="el-icon-help"></i>动向学生治理</el-menu-item> <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生治理</el-menu-item> <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生治理</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-menu"></i>教研部</template> <el-menu-item-group> <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item> <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item> <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <!-- 主区域局部 --> <el-main> <b style="color: red; font-size: 20px;">学生列表</b> <div style="float: right;"> <el-button type="primary">增加学生</el-button> </div> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作" width="180"> <el-button type="warning">编辑</el-button> <el-button type="danger">删除</el-button> </el-table-column> </el-table> </el-main> </el-container> </el-container> </el-container></div></body><script> new Vue({ el:"#div", data:{ tableData:[ { date:"2088-08-08", name:"张三", address:"北京市昌平区" },{ date:"2088-08-08", name:"李四", address:"北京市昌平区" },{ date:"2088-08-08", name:"王五", address:"北京市昌平区" },{ date:"2088-08-08", name:"赵六", address:"北京市昌平区" } ] } });</script></html>❤️ 帅气的你又来看了我
如果你感觉这篇内容对你挺有有帮忙的话：
- 点赞反对下吧，让更多的人也能看到这篇内容（珍藏不点赞，都是耍流氓 -_-）
- 欢送在留言区与我分享你的想法，也欢送你在留言区记录你的思考过程。