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><el-inputv-model="input1"type="text"placeholder="用户ID"maxlength="6"show-word-limit></el-input><el-inputv-model="input2"type="text"placeholder="用户昵称"show-word-limit></el-input><el-inputv-model="input3"type="text"placeholder="用户昵称"show-word-limit></el-input><el-inputv-model="input4"placeholder="请输入密码"show-password></el-input><el-inputv-model="input5"type="text"placeholder="用户姓名"show-word-limit></el-input><el-inputv-model="input6"type="text"placeholder="用户权限"maxlength="2"show-word-limit></el-input><el-input v-model="input7" placeholder="邮箱"><template slot="append">@163.com</template></el-input><el-inputv-model="input8"type="text"placeholder="手机号码"maxlength="20"show-word-limit></el-input><el-inputv-model="input9"type="text"placeholder="固定电话"maxlength="20"show-word-limit></el-input><el-button-group style="float: right; padding: 3px 0" 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 style="float: left"><b>账号绑定</b></span><el-button-groupstyle="float: right; padding: 3px 0"type="text"><el-buttontype="primary"icon="el-icon-edit"size="medium"round>修改信息</el-button><el-buttontype="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" style="width: 100%"><el-table-column label="账号名" width="180"><template slot-scope="scope"><p>{{ scope.row.name1 }}</p><div slot="reference" class="name-wrapper"></div></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">解绑</el-button></template></el-table-column><el-table-column label="更多" align="center"><el-row><el-buttontype="info"icon="el-icon-message"circle></el-button><el-buttontype="warning"icon="el-icon-star-off"circle></el-button><el-buttontype="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" style="width: 100%"><el-table-column label="账号名" width="180"><template slot-scope="scope"><p>{{ scope.row.name2 }}</p><div slot="reference" class="name-wrapper"></div></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">解绑</el-button></template></el-table-column><el-table-column label="更多" align="center"><el-row><el-buttontype="info"icon="el-icon-message"circle></el-button><el-buttontype="warning"icon="el-icon-star-off"circle></el-button><el-buttontype="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 style="float: left" 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:'https://cube.elemecdn.com/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: '';}.clearfix:after {clear: both;}.box-card {width: 1368px;border-radius: 30px;}
</style>

学无止境，继续加油吧。

VUE：element ui组件应用之个人中心页面相关推荐

Vue+element ui实现好看的个人中心
目录一.效果图二.项目结构三.界面效果和代码实现 1.路由注册 2.个人主页实现 3.编辑弹窗按钮实现 4.个人简介实现 5.发贴页实现 6.收藏页实现 7.关注和收藏页实现四.总结一.效果 ...
Vue Element UI 组件化之背景图组件
step1:创建背景图组件 bg.vue 该组件实现: 1.背景图可以自适应屏幕宽度(高度足够适应,不考虑高度) 2.背景图位置固定,不会产生滚动条 3.背景图高度足够高(1920*4092),可以自 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
vue element隐藏组件滚动条scrollbar使用
pc端项目中,有时候会在页面内部出现滚动条的情况,windows浏览器默认的滚动条是很丑的,尤其是当滚动天出现在页面内部的时候,这时候,为了页面美观,可以考虑优化滚动条样式. vue Element ...
[转]VUE优秀UI组件库合集
原文链接随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

VUE：element ui组件应用之个人中心页面

element ui组件应用之个人中心页面

页面预览及源码

VUE：element ui组件应用之个人中心页面相关推荐

最新文章

热门文章