【郑州校区】传智健康项目讲义第一章之ElementUI 二 - 黑马程序员技术交流社区

【郑州校区】传智健康项目讲义第一章之ElementUI 二

[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>

[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>

[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>