学习目标：使用ElemenetUI框架中的 el-tabs组件学习内容：平时在做项目时，tab切换效果几乎是必不可少的，下来整理一个最近做的一个小功能：el-tabs效果图：  html：会员购推广优惠券说明：v-model：当前选中项:tab-position：tab栏显示方向@tab-click：切换tab栏的事件JS：data(){return{activeNames:['1'],activeName:'coupon',tabPosition:'left'}},methods:{changeTab(tab){console.log('触发tab',tab.name)}}

在实际开发中我们常常遇到在单页面中点击导航栏菜单中的某一选项卡，页面中的某个部分出现相关的信息，也就是使用导航栏进行路由跳转。如下图所示（在线格式转换）。示例template> el-container>el-header> divclass='sys-title'>后台管理系统/div> divclass='header-right'> span>网站首页/span> span>头像/span> span>admin/span> span>退出/span> /div> /el-header>el-container>el-asidewidth="200px"> el

效果图如下图所示，当我们点击确定的时候，判断表格其中某行、某值是否为空，并且可以精确到某行某个字段，进行提示操作：本文提供详细的函数解决方案，配合示例解决方案HTML：divclass="app-container">el-formref=

按需引入后ElMessage与ElLoading 的问题，两步优雅解决找不到名称“ElMessage”问题。不需要导入npm包，不需要下载任何东西，只要五行代码目录1、添加ElementPlus组件库1.2、下载1.2、自动导入(官方推荐)2、按需引入后ElMessage与ElLoading 的问题2.1、解决问题2.2、下面是分析原因,有兴趣可以看一下1、添加ElementPlus组件库1.1、下载 npmnpminstallelement-plus--save  yarn  yarnaddelement-plus 1.2、下载element-iconnpminstall@element-p

element-ui改变icon大小在template里面加入div再在style样式中.change-icon{font-size:20px;}这就相当于给块组件赋予了形状大小的属性。

        这次写的项目是写后台管理系统这部分，对于后台管理使用vue写，用组件的话，table组件用得次数比较多，可以封装一个table组件。        1.如封装的table组件：{{item2.name}}{{scope.row[item.prop]}}exportdefault{name:"UserTableCenter",props:{tableData:{type:Array,default:()=>[],},tableLabel:{type:Array,default:()=>{return[];},},},}; :prop="item.prop"  :label="it

一、ElementUIContainer布局容器布满全屏：1、需要给包裹的div一个height：100%2、给#app,html,body,.el-container一个height：100%3、给el-container设置direction="vertical"，因为包含main和footer二、头部和侧边栏固定el-main可滚动HeaderAsideMain给内容区域的container加样式** height:calc(100vh-头部的高度);

预览效果： 代码：{{btn.label}}确定import_from"lodash";exportdefault{props:{initList:{type:Array,default:()=>[]}},watch:{initList(val){this.getList(val);},dialogShow(val){val&&this.getList();}},data(){return{optionsList:[],chooseColumn:[],chooseItem:[],dialogShow:false,btnList:[{label:"上移",key:"up"},{label:"下移

设置elementui的el-popover的样式需要自定义popper-class：自定义popper-class="tips-con"，如下：template>el-popoverwidth="300"trigger="hover"popper-class="tips-con"title="提示"placement="top-start">divclass="operate-btn"slot="reference">el-buttonsize="mini"type="primary">消息提示/el-button>/div>spanslot="default">这是一个详情/span>/e

需求描述：element-plus+el-table点击行选中并修改背景色+文字颜色代码实现：方法一：重点：highlight-current-row/*选中某行时的背景色*/.el-table__bodytr.current-row>td{color:#28A458;background:rgb(197,213,255)!important;}element-plus本身有给提供这个功能，而且比第二个方法更好用，第二个方法在有列固定的情况下，样式会不生效，所以建议直接用第一种方法二：重点：@row-click:row-styleconststate=reactive({ checkNumbe