ElementUI
学习UI框架
Sunshine_Jian
这个作者很懒,什么都没留下…
展开
-
ElementUI图片上传 缩略图 picture-card 数量限制
ElementUI图片上传 缩略图 picture-card 数量限制,问题描述:在图片上传列表中,需要对图片上传的个数进行限制,在增加图片到最大数量限制时,就将上传框隐藏掉;在删除后,就再次显示出来;如果仅仅用 limit 是 可以实现功能的,但是会在后面发现下图最后面的框,还能选取文件,只是上传不了;原创 2022-11-09 10:03:14 · 2002 阅读 · 0 评论 -
el-table 列内容溢出 显示省略号 悬浮显示文字
el-table 表格列内容溢出,文本溢出,显示省略号,单行、多行省略;鼠标悬浮hover(点击click等其他其他事件)显示文字,包括el-tooltip、el-popover、show-overflow-tooltip、title等其他的一些实现方法的总结,以及一些想法的分享!...原创 2022-08-03 11:19:47 · 10429 阅读 · 2 评论 -
【ElenmentUI el-date-picker日期选择器,结束时间不得早于开始时间,且只能选择距开始时间指定天数的日期】
场景:1、开始时间不得晚于结束时间;结束时间不得早于开始时间;2、开始时间与结束时间之间,有可选择的天数间隔,只可选择间隔日期内的日期;例如:设置间隔时间为5天;日期的取值范围,如下:2022-05-26 00:00:00——2022-05-30 23:59:592022-05-26 10:00:00——2022-05-31 10:00:00效果:完整代码:<template> <div> <el-but...原创 2022-05-26 16:56:58 · 3130 阅读 · 1 评论 -
el-table的自定义行高设置
发生场景:el-table默认的行高与padding,使原本在一页中不能完全呈现内容,所以需要自定义行高;单独的设置height会达到最小值,但还是和要求不符,所以修改了padding值,让默认的内边距减小,使内容更紧贴;具体操作:在el-table标签上,设置:row-style="{height: '0'}"为最小行高,同时修改默认的padding值;让表格更好的展示为一页;关键代码:<el-table :data="tableData" border...原创 2022-03-21 10:25:22 · 24203 阅读 · 6 评论 -
Vue项目中el-table导出Excel
1、安装相关的依赖;(xlsx,file-saver)npm install --save xlsx file-saver2、在main.js里引入import FileSaver from 'file-saver'import XLSX from 'xlsx'Vue.prototype.$FileSaver = FileSaver; //设置全局Vue.prototype.$XLSX = XLSX; //设置全局3、设置表格的id<el-table原创 2022-03-01 14:41:41 · 4282 阅读 · 9 评论 -
el-table 列内容溢出隐藏,鼠标悬浮提示效果
场景:在备注内容很多的情况下,将列表都展示出来,会显得行特别的高;所以需要进行溢出隐藏处理,并在鼠标悬浮的时候进行特殊的提示;效果:关键代码:<el-table id="out-table" :header-cell-style="{ background: '#eef1f6', color: '#606266','text-align':'center' }" :data="detailList" stripe style="width: 100...原创 2022-02-21 14:43:20 · 7423 阅读 · 2 评论 -
解决el-drawer打开后,日期选择器随之打开的问题
场景:在el-drawer打开后,里面的日期选择器el-date-picker自动弹出;解决办法:1、第一步:el-date-picker 中:disabled="drawerShow"data(){ return {drawerShow:false}}2、第二步:在el-drawer中@open=“handleOpenDrawer” @close=“handleCloseDrawer”methods:{handleOpen...原创 2022-02-18 11:35:50 · 1223 阅读 · 0 评论 -
【Element-UI-日期选择,开始时间不晚于结束时间,结束时间不早于开始时间,选择其中一个,另一个限制可选中范围】
场景:form表单包含开始时间与结束时间,为防止开始日期晚于结束日期;或者是结束日期早于开始日期;必须控制日期的可选区域;原创 2022-01-10 14:09:41 · 1168 阅读 · 0 评论 -
elementUI el-table @row-click 解决行内冲突--忽略指定列区域点击效果
单击el-table行的时候;忽略指定列;原创 2021-12-22 11:31:05 · 7531 阅读 · 2 评论 -
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突
场景:点击行内按钮事件的时候,同时也出发触发了行的事件;因为行内按钮的父元素是单元格,而单元格的父元素是行;最里层子元素接收到事件后,再层层向上传递给父元素;原创 2021-12-22 09:43:46 · 12257 阅读 · 5 评论 -
ElementUI 自定义-下拉选择年份
下拉选择年份,更简洁原创 2021-12-08 11:57:46 · 3221 阅读 · 0 评论 -
ElementUI-分页-自定义文字-共计-跳至
场景:有时候需要使用自己去改显示的内容;包括共计 ,跳转等效果图:HTML代码:<!-- 分页 --> <div style="display: flex; justify-content: center; padding: 10px 0"> <span style="line-height: 28px; font-size: 13px" >共 {{ currentTot...原创 2021-11-23 15:15:34 · 4098 阅读 · 1 评论