vue elementui
文章平均质量分 50
摸鱼的图图
这个作者很懒,什么都没留下…
展开
-
【echarts多个y轴分页展示,格式化label,格式化tooltip,自动换行】
echarts 多个y轴显示折线图,格式化tooltip,数字换行,添加label等原创 2022-12-27 13:59:37 · 1094 阅读 · 1 评论 -
vue 2 和 vue3 组件的五种通讯方式
vue2 vue3 5种通讯方式总结。原创 2022-10-24 16:00:02 · 1069 阅读 · 0 评论 -
后端一次性返回10万条数据,使用vue,你该如何渲染?
后端一次性返回10万条数据,使用vue的解决方案有多种,本文采用pl-table和后端循环的方式进行获取和渲染数据。原创 2022-08-20 19:05:42 · 6387 阅读 · 2 评论 -
vue elementui table表格序号一列 样式设计
elementui table表格序号一列 样式设计1. 需求描述2. html代码3. css设计成这样:1. 需求描述elementui table排序后 将序号 前三名按照如果所示的样式展示出来。其中涉及的css包括序号背景大小、如何对前三个序号,每个设计不同的颜色等。2. html代码<el-table border :header-cell-style="{background: '#fafafa'}" :data="chartDataType.rows" highlight-c原创 2021-12-13 16:32:37 · 2433 阅读 · 0 评论 -
vue-gallery + axios 上传图片,给每个图片添加进度条
使用vue-gallery + axios 上传图片,给每个图片添加进度条。问题描述1. 前端新增时对话框2.新增保存方法,axios同步进度问题描述项目中使用vue-gallery 上传和管理图片,因为图片跟当前业务数据分开保存在不同的表中(因为是一对多,所以图片有一个单独的表),需要在业务数据保存成功后返回新增成功的业务id,根据返回的id再保存图片到表中,所以用到了axios进行异步调用。由于图片大于10M后,上传速度慢下来,前端显示成功,但是点击编辑图片还没加载上。所以需要在前端显示进度。原创 2021-11-22 16:54:54 · 1120 阅读 · 0 评论 -
vue 批量下载图片并打包成zip包
vue 批量下载图片并打包成zip包1、前端展示效果2、前端代码1、前端展示效果2、前端代码第一步:安装jszip 、file-savercnpm install jszipcnpm install file-saver第二步:导入jszip 、file-saver import JSZip from 'jszip' import FileSaver from "file-saver"第三步:展示代码 <!--查看照片--> <el-dialog原创 2021-11-08 16:35:45 · 2858 阅读 · 0 评论 -
elementui 在表格单元格中添加el-tooltip,并在el-tooltip中添加走马灯图片,设置图片下方的横条宽度。
描述:项目中使用的elementui-ui版本是2.8.2。业务需求:在文字上添加提示框,并在提示框中添加走马灯图片。问题1:在添加完图片后,图片过多时,下方横条会换行,于是调整横条css,最终达到如下效果。1. 前端html代码,需要注意的是这里图片的宽度和高度写固定了,这个可以调整,图片下方加了字,是图片的名称。 <el-table-column align="center" prop="toolName" label="工具名称"> <t原创 2021-09-30 09:18:10 · 3507 阅读 · 0 评论 -
elementui 改变全局所有表格的边框颜色。
问题描述:应用户需求要调整表格边框和表格行的颜色。附加:最好改变全局所有表格的边框颜色。使用的elementui框架,该框架是开源的,但是也存在很多问题。改变表格的边框颜色没有特定的属性进行修改,只能通过css脚本进行修改。解决办法:1.通过浏览器找到表格边框的css样式。鼠标放在边框上,右键弹框中选择“检查”。进入如下图所示:到这一步后其实我也不知道哪一个是能改变表格内行颜色的,这个时候该怎么办呢?因为css本身底子比较弱,所以只能用笨办法,一个一个试,凡是看见原创 2021-08-19 14:48:23 · 5411 阅读 · 3 评论 -
elementui 中 el-input 调整边框宽度
问题描述:项目中遇到调整 el-input边框大小的问题,但是在通过右键 “检查”时,调整css后,多个输入框之间的距离特别大,不能调整。于是想到用布局span属性。elementui官方是这样规定的:解决方法:在项目中是这样解决的:首先有一个el-form表单,将表单内容放到一行中,然后对每个item外层加一个el-col并对其设置栅格。效果如下:...原创 2021-08-19 14:41:13 · 3225 阅读 · 0 评论 -
elementui 排版布局时遇到的问题
问题描述:换行后字数少但跟其他行左对齐不了。因为整体的文字都设置的在中间,换行后有一行字数只有四五个字,怎么设置也跟上一行左对齐不了。后来想明白了,因为每一行能左对齐到一块是因为后面的字将其挤到了最左边。解决方法:将最后一行后面加空格,一直加到跟上一行左对齐为止。<p>准予交付。         &e.原创 2021-08-19 14:31:24 · 738 阅读 · 0 评论 -
前端 对数组进行排序方法 sort 总结,包括读数字和时间排序
因项目中使用到在前端对数据列表排序,有的是对数字的排序,有的是对时间的排序,排序的方法有些不同,故此记录。1.对数字类型排序this.list.sort(function(o1,o2) {return o1 - 02})例子:2.对日期类型排序this.list.sort(function(o1,o2) {return o1.time < o2.time ? 1 : -1}) //降序排列...原创 2021-08-19 14:25:31 · 2644 阅读 · 0 评论 -
elementui el-select多选进行初始化后,重新选择选不上问题完美解决。
问题描述:elect多选进行初始化后,重新选择选不上?这个问题之前也遇到了,但是一直都是采用两个变量解决的。今天百度终于找到一个好的解决方法。初始化后,点击选项选择不上,后来加了@change=“selectChangeMethod”进行了强制刷新,然后完美解决。...原创 2021-08-19 14:18:40 · 1498 阅读 · 1 评论 -
使用elementui + axios上传图片踩过的坑
1.先了解一下axiosaxios中文文档介绍:http://www.axios-js.com/zh-cn/docs/执行GET请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 上面的请求也可以这样做axios.get..原创 2021-08-19 14:13:30 · 748 阅读 · 0 评论 -
elementui 中table合并单元格后,序号是1,3,5,8....,如何变成正常的1,2,3.....
html代码:el-table中添加prop="Nosort"<el-table border :header-cell-style="{background: '#fafafa'}" :data="list" height="a" highlight-current-row style="flex:1;width:100%;" :span-method="objectSpanMethod" > <el-table-原创 2021-08-19 13:51:57 · 1854 阅读 · 1 评论 -
elementui el-tab页面切换如何自动刷新当前页面?
问题描述:当tab页面第一次切换时会自动刷新页面,但当第二次再切换到该页面是不自动刷新,如何让每次切换都刷新问题。解决方法:去掉keep-alive。子组件修改监听事件。keep-alive:主要用于保留组件状态或避免重新渲染。父组件原代码(无法实现切换自动刷新):<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> <el-tab-pane原创 2021-08-19 14:02:52 · 7800 阅读 · 0 评论