本帖最后由 我是楠楠 于 2019-10-23 15:22 编辑
【郑州校区】传智健康项目讲义第一章之ElementUI 二
4.2.3 NavMenu 导航菜单
为网站提供导航功能的菜单。
[AppleScript] 纯文本查看 复制代码 <el‐menu>
<el‐submenu index="1">
<template slot="title">
<i class="el‐icon‐location"></i>
<span slot="title">导航一</span>
</template>
<el‐menu‐item>选项1</el‐menu‐item>
<el‐menu‐item>选项2</el‐menu‐item>
<el‐menu‐item>选项3</el‐menu‐item>
</el‐submenu>
<el‐submenu index="2">
<template slot="title">
<i class="el‐icon‐menu"></i>
<span slot="title">导航二</span>
</template>
<el‐menu‐item>选项1</el‐menu‐item>
<el‐menu‐item>选项2</el‐menu‐item>
<el‐menu‐item>选项3</el‐menu‐item>
</el‐submenu>
</el‐menu>
4.2.4 Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
[AppleScript] 纯文本查看 复制代码 <el‐table :data="tableData" stripe>
<el‐table‐column prop="date" label="日期"></el‐table‐column>
<el‐table‐column prop="name" label="姓名"></el‐table‐column>
<el‐table‐column prop="address" label="地址"></el‐table‐column>
<el‐table‐column label="操作" align="center">
<!‐‐
slot‐scope：作用域插槽，可以获取表格数据
scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是
固定写法
‐‐>
<template slot‐scope="scope">
<el‐button type="primary" size="mini"
@click="handleUpdate(scope.row)">编辑</el‐button>
<el‐button type="danger" size="mini"
@click="handleDelete(scope.row)">删除</el‐button>
</template>
</el‐table‐column>
</el‐table>
<script>
new Vue({
el:'#app',
data:{
tableData: [{
date: '2016‐05‐02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016‐05‐04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016‐05‐01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
},
methods:{
handleUpdate(row){
alert(row.date);
},handleDelete(row){
alert(row.date);
}
}
});
</script>
4.2.5 Pagination 分页
当数据量过多时，使用分页分解数据。
[AppleScript] 纯文本查看 复制代码 <!‐‐
current‐change：内置的事件，当前页码改变时会触发，可以获取到改变之后的页码
‐‐>
<el‐pagination
@current‐change="handleCurrentChange"
current‐page="5"
page‐size="10"
layout="total, prev, pager, next, jumper"
:total="305">
</el‐pagination>
<script>
new Vue({
el:'#app',
methods:{
handleCurrentChange(page){
alert(page);
}
}
});
</script>
| 
收藏
淘帖
踩
