草庐IT

Element2

全部标签

vue - element ui 组件库判断验证 <table> 表格组件输入内容不能为空,判断表格其中某行某值不能为空(详细示例解决方案)

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

vite + vue + ts 自动按需导入 Element Plus组件,并如何解决按需引入后ElMessage与ElLoading 的问题(找不到名称“ElMessage”问题。)

按需引入后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大小

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

vue中element-ui表格组件el-table封装,在table表格中插入图片

        这次写的项目是写后台管理系统这部分,对于后台管理使用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

Element UI Container 布局容器 布满全屏, 头部和侧边栏固定 el-main可滚动

一、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-头部的高度);

vue + element-ui 穿梭框+上下移动、置顶置底功能

预览效果: 代码:{{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:"下移

vue 设置element ui的el-popover的样式

设置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 点击单行修改背景色

需求描述: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

element ui中el-tabs 标签页使用技巧

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言二、代码如下(示例):总结前言当我们使用el-tabs不要按照固化的思路去写每一页的具体内容,可以通过放在el-tabs外部,相同内容,来让代码更简洁提示:以下是本篇文章代码,下面案例可供参考二、代码如下(示例):el-tabsv-model="formData.type"@tab-click="onSubmit">el-tab-panelabel="前部"name="1">/el-tab-pane>el-tab-panelabel="后部"name="2">/el-tab-pane>el-tab-panelabel=

使用element-ui的Upload 上传文件

使用Upload进行文件上传https://element.eleme.cn/#/zh-CN/component/upload注:当文件和一些其他数据(姓名,年龄)进行一起上传时候可分为两种过程第一种:单独的文件上传地址,上传完文件后,后端返回该文件的地址,前端将该地址同其他数据(姓名,年龄)再次上传。第二种:文件和数据(姓名,年龄)同一个接口进行上。本文采用的是第二种使用varformData=newFormData();进行同时上传。下面展示一些内联代码片。template>div>el-dialogtitle="文件上传":visible.sync="dialogFormVisible"