一、效果图 仿照原神社区的个人中心写了个个人中心界面，下图分别为原神社区个人中心主页和我画的个人中心的效果图： 原神社区个人中心效果图：我画的个人中心效果图： 下面上代码 二、项目结构 router文件夹里的index.js为路由注册文件，person文件夹里Info文件为个人简介页，MyArticle文件为发布页，MyCollect为文件收藏页，MyFanAndFollow文件为粉丝和关注页，Personal文件为个人中心主页，PersonalDia文件为编辑按钮弹

<el-tabs  v-model="activeIndex"  type="card"  @tab-click="clickTab"  @tab-remove="removeTab"  closable>         <el-tab-pane  v-for="item of openTab"  v-show="openTab.length"  :key="item.name"  :label="item.name"  :name="item.route" >&

项目场景： element-ui MessageBox 弹框怎么隐藏右上角的关闭按钮呢？ element-ui MessageBox 弹框怎么设置点击空白处不关闭？ 如何隐藏this. c o n f i

作者简介 作者名：编程界明世隐简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 引言 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以

未来日子还长，请保持好心情。  效果概览：修改el-input样式。外层是框框，内层是input和i，实现点击查询图标查询、点击取消按钮清空form的同时 重置查询结果。从而实现不带查询按钮，单一input实现查询重置功能   目录 一、给el-input添加自定义图标  二、图标实现点击操作 1. 样式修改  2. 取消按钮的显示与隐藏 一、给el-input添加自定义图标 基础elementUI 添加clearable之后可以实现【可删除的

需求： 点击树结构右侧区域的按钮，树结构高亮选中的节点，并展开父节点，定位到高亮的节点。 感觉el-tree应该直接可以实现这种操作，但是setcurrentKey方法只实现了高亮节点，没有展开父节点，也没有定位到这个节点。不知道是哪个属性没有设置，还是设置了哪个属性影响了。一个个排查后，始终达不到想要的效果。那好吧，只能手动实现这个功能了。 解决方案： 1、高亮节点后，展开父节点。 2、获取高亮节点的offsetTop，把滚动条的位置定位到这个元素附近。 关键部分代

一、前言 面包屑用于显示当前页面的路径，快速返回之前的任意页面。 例如： 二、组件使用 elementUI官网的实例十分简单，并没有配合路由来创建面包屑。 但是文档中发现Breadcrumb Item的属性中是有"to"属性的，所以可以通过给"to"属性赋值，来实现同ruter-link一样的效果，即点击单个面包屑项来实现路由跳转。 文件目录： 路由配置： { path: '/bread-crumb', name: 'BreadCrumb', comp

项目介绍 使用 vue 以及 element-ui 搭建一个 后台管理系统的模板。 纯属练手（写的比较糙 望指点） 基本环境搭建 初始化项目 使用 vue 以及 element-ui 搭建一个 后台管理系统的模板。 纯属练手（写的比较糙 望指点） 1、初始化项目（babel vuex router eslint） vue create sandcms    2、等待 出现以下提示  进入项目并启动  3、启动项目 成功后进入以下界面  即创建成功 npm run s

el-dialog(对话框)入门学习 适用场景 新增和编辑操作想要以弹框的方式显示，使用到el-dialog 知识点 el-dialog的title设置标题 el-dialog的visible.sync控制弹框的显示 el-dialog的append-to-body支持弹框中继续打开弹框 el-dialog的before-close关闭按钮的钩子 span的slot='footer'弹框底部设置 el-dialog的center标题和底部居中显示 效果图

一、问题再现 table组件使用row-class-name属性无效! <template> <div> <h3>Table表格组件的使用</h3> <el-table :data="tableData" stripe border :row-class-name="tableRowClassName"> <el-table-column prop="id" label="编号" width=

大家好呀，今天给大家介绍如何设置elementUI中滚动条的隐藏问题，因为是在今天做侧边栏里面的导航时出现了底侧导航栏和右边的导航栏，一看是在是有点丑了，于是乎就从别的博主那里找到了两个方法，再此总结一下。 最初的样式：丑的一匹      隐藏底部导航栏：只需要把会出现侧边栏的内容区域放在<el-scrollbar></el-scrollbar>标签中即可，在为这个标签加一个类名就叫做page-scroll，然后在加入下面的样式。 /* 隐藏

（本作为傻瓜级别教程，即看即用） 1.第一步： 搜索element ui 上传组件（Upload 上传）： 2.第二步： 将你心仪的上传组件放入你的vue中（这些上传组件效果不同，尽量根据他的作用放置上传组件）  3.第三步： 在methods中写入你的校验格式方法 绑定校验触发钩子 （中间那些格式可以替换成png，jpg等，官网的示例中就有，所以按照这个理论音乐应该也可以）  写完方法之后记得与官方写的触发钩子进行绑定。（不知道什么意思了,移步element ui上