VUE：elementui组件应⽤之个⼈中⼼页⾯element ui组件应⽤之个⼈中⼼页⾯
纯⼩⽩⾃⼰完成的页⾯
页⾯预览及源码
// 源码（版权所有）：
<template>
<div class="personalCenter">
<el-container>
<el-header>个⼈中⼼</el-header>
<el-container>
<el-aside width="400px">
<el-col :span="12">
<div class="sub-title"></div>
<div class="demo-basic--circle">
<div class="img">
<el-avatar
:
size="100"
:src="circleUrl"
align="center"
></el-avatar>
</div>
<div class="block">
<span>ADMIN</span>
</div>
</div>
</el-col>
vue element admin<el-input
v-model="input1"
type="text"
placeholder="⽤户ID"
maxlength="6"
show-word-limit
></el-input>
<el-input
v-model="input2"
type="text"
placeholder="⽤户昵称"
show-word-limit
></el-input>
<el-input
v-model="input3"
type="text"
placeholder="⽤户昵称"
show-word-limit
></el-input>
<el-input
v-model="input4"
placeholder="请输⼊密码"
show-password
></el-input>
<el-input
v-model="input5"
type="text"
placeholder="⽤户姓名"
show-word-limit
></el-input>
<el-input
v-model="input6"
type="text"
placeholder="⽤户权限"
maxlength="2"
show-word-limit
></el-input>
<el-input v-model="input7" placeholder="邮箱">
<template slot="append">@163</template>
</el-input>
<el-input
v-model="input8"
type="text"
placeholder="⼿机号码"
maxlength="20"
show-word-limit
></el-input>
<el-input
v-model="input9"
type="text"
placeholder="固定电话"
maxlength="20"
show-word-limit
></el-input>
<el-button-group type="text">
<el-button type="primary" size="medium" round>保存</el-button> </el-button-group>
</el-aside>
<el-container>
<el-main>
<el-card class="box-card">
<div slot="header"class="clearfix">
<span ><b>账号绑定</b></span>
<el-button-group
type="text"
>
<el-button
type="primary"
icon="el-icon-edit"
size="medium"
round
>
修改信息
</el-button>
<el-button
type="primary"
icon="el-icon-check"
size="medium"
round
>
确认修改
</el-button>
</el-button-group>
</div>
<div v-for="o in 1":key="o"class="text item">
<el-table :data="tableData" >
<el-table-column label="账号名" width="180">
<template slot-scope="scope">
<p>{{ w.name1 }}</p>
<div slot="reference"class="name-wrapper"></div>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, w)"
>
编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, w)"
>
解绑
</el-button>
</template>
</el-table-column>
<el-table-column label="更多" align="center">
<el-row>
<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="share"
icon="el-icon-share"
circle
></el-button>
</el-row>
</el-table-column>
</el-table>
</div>
<div v-for="o in 1":key="o"class="text item">
<el-table :data="tableData" >
<el-table-column label="账号名" width="180">
<template slot-scope="scope">
<p>{{ w.name2 }}</p>
<div slot="reference"class="name-wrapper"></div>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, w)"
>
编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, w)"
>
解绑
</el-button>
</template>
</el-table-column>
<el-table-column label="更多" align="center">
<el-row>
<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="share"
icon="el-icon-share"
circle
></el-button>
</el-row>
</el-table-column>
</el-table>
</div>
</el-card>
<el-card class="box-card">
<div>
<span shadow="hover"><b>个⼈说明</b></span>
<br />
<br />
<span>螃蟹在剥我的壳</span>
<el-divider></el-divider>
<span>笔记本在写我</span>
<el-divider></el-divider>
<span>漫天的我落在枫叶的雪花上</span>
</div>
</el-card>
</el-main>
</el-container>
</el-container>
</el-container>
</div>
</template>
<script>
export default{
name:'PersonalCenter',
data(){
return{
text:'',
input1:'',
input2:'',
input3:'',
input4:'',
input5:'',
input6:'',
input7:'',
input8:'',
input9:'',
circleUrl:
'cube.elemecdn/0/88/03b0d39583f48206768a7534e55bcpng.png',        sizeList:['large'],
tableData:[
{
date:'2016-05-03',
name1:'Wechat',
name2:'Github',
},
],
}
},
methods:{
handleEdit(index, row){
console.log(index, row)
},
handleDelete(index, row){
console.log(index, row)
},
},
}
</script>
<style>
.
el-header {
line-height:60px;
text-align: center;
background-color: #b3c0d1;
}
.el-aside {
line-height:44px;
text-align: center;
background-color: #d3dce6;
}
.el-main {
line-height:36px;
text-align: center;
background-color: #e9eef3;
}
.demo-basic--circle {
align:'center';
margin-top:30px;
margin-left:150px;
}
.block {
margin-left:25px;
font-weight: bold;
}
.text {
font-size:14px;
}
.item {
margin-bottom:18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content:'';
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。