Vue element-UI开发学习---单一页面学习
Vue element-UI开发学习---单一页面学习<template>
<div id="app">
<!-- nav -->
<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
menu-trigger="hover">
<el-menu-item index="1">Data View</el-menu-item>
<el-submenu index="2">
<template slot="title">Data XX</template>
<ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
<ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
<ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
<ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
</el-submenu>
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
</el-menu>
<!-- search -->
<br>
<el-row>
<ElCol :span="6" class="grid">
<el-input v-model="input" placeholder="please input the value" ></el-input>
</ElCol>
<ElCol :span="2" class="grid">
<el-button type="success" icon="el-icon-search" >Search</el-button>
</ElCol>
</el-row>
<br>
<!-- table and operations -->
<el-table
:data="tableData"
style="width:100%"
stripe
>
<el-table-column fixed label="Date"prop="date"></el-table-column>
<el-table-column label="Name" prop="name"></el-table-column>
<el-table-column label="Address"prop="address"></el-table-column>
<el-table-column align="right">
<template slot="header">
<el-input v-model="search" placeholder="please input the keywords"></el-input>
</template>
</el-table-column>
<el-table-column>
<template >
<el-buttontype="primary" icon="el-icon-edit">Edit</el-button>
<el-buttontype="danger" icon="el-icon-delete">Delete</el-button>
</template>
</el-table-column>
</el-table>
<br>
<!-- Add new buttons-->
<el-row>
<ElCol :span="1" class="grid">
<el-tooltip effect="dark" content="Add new information" placement="top-start">
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
</el-tooltip>
</ElCol>
<ElCol :span="1" :offset="1" class="grid">
<el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
<el-button type="danger" icon="el-icon-delete">Delete All</el-button>
</el-tooltip>
</ElCol>
</el-row>
<!-- Page split -->
<br>
<el-pagination background
:total="1000"
layout="prev,pager,next">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {
activeIndex: '2',
url:"http://baidu.com",
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>
<style>
#app {
font-family: Helvetica, sans-serif;
text-align: center;
}
</style>
页:
[1]