Java64健康项目_ElementUI
Posted 码农编程录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java64健康项目_ElementUI相关的知识，希望对你有一定的参考价值。
文章目录
1.ElementUI
http://element-cn.eleme.io/#/zh-CN
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="elementui/vue.js"></script>
<script src="elementui/index.js"></script>
<link rel="stylesheet" href="elementui/index.css">
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div id="app">
<el-container>
<el-header>
<el-dropdown>
<span class="el-dropdown-link">
lisi<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-container>
<el-aside>
<el-menu>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<a href="table.html" target="content">table</a>
</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航二</span>
</template>
<el-menu-item-group>
<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-submenu>
</el-menu>
</el-aside>
<el-main>
<iframe name="content" width="100%" height="100%"></iframe>
</el-main>
</el-container>
</el-container>
</div>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: right;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
</body>
<!--111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
new Vue({
el:"#app",
data:{
arr:[100, 200, 300, 400,500],
currentPage4:1,
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
},
methods:{
handleClick(row){
console.log(row)
},
deleteById(){
alert(111)
},
handleSizeChange(val) {
console.log(val);
},
handleCurrentChange(val) {
console.log(val);
}
}
})
</script>
</html>
//table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="elementui/vue.js"></script>
<script src="elementui/index.js"></script>
<link rel="stylesheet" href="elementui/index.css">
</head>
<body>
<div id="app">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small" @click="deleteById()">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="arr"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
arr:[100, 200, 300, 400,500],
currentPage4:1,
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
},
methods:{
handleClick(row){
console.log(row)
},
deleteById(){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
/*this.$message({
type: 'success',
message: '删除成功!'
});*/
alert("点击了确定")
}).catch(() => {
/* this.$message({
type: 'info',
message: '已取消删除'
});*/
alert("取消")
});
},
handleSizeChange(val) {
console.log(val);
},
handleCurrentChange(val) {
console.log(val);
}
}
})
</script>
</html>
以上是关于Java64健康项目_ElementUI的主要内容，如果未能解决你的问题，请参考以下文章
VUE项目实战64CND优化ElementUI以及首页内容定制
VUE项目实战64CND优化ElementUI以及首页内容定制
PCL异常处理：pcl 1.8.13rdpartyoostincludeoost-1_64oost ypeofmsvc ypeof_impl.hpp(125): error(代码片段