![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue前端项目实战经验
AtlaS_Y
这个作者很懒,什么都没留下…
展开
-
Vue2/Python 实现文件通过post接口上传到后端并进行读取
设置action='#',因为action中填入url之后,无法再自定义请求体的内容,只会把文件直接传输过去。实现思路:前端页面通过el-upload组件来上传文件,并通过接口将文件和其他数据打包发送到后端;后端通过pandas库的功能实现对文件的读取,并根据读取的数据进行一些具体的操作。为了实现点击创建按钮后触发上传,需要在按钮绑定的submitUpload方法中触发el-upload的提交。从options中读取file文件,若为多个文件上传,可以读取fileList来上传。原创 2024-07-23 18:13:44 · 168 阅读 · 0 评论 -
vue2/Echarts 简单通过visualMap配置实现折线图线条区域变色
如果两个 piece 的区间重叠,则会自动进行去重。原创 2024-07-12 16:41:29 · 217 阅读 · 0 评论 -
Vue2/Echarts 在加载时从缓存页面离开再返回后图表不能正常显示的问题以及图表自动随页面大小缩放功能实现
现有存放图表的页面A与一个其他页面B,A设置了keep-alive为true,在等待A页面数据加载时,切换到页面B,等待一段时间后再切回A,发现A中的除图表外数据都正常显示,图表不显示。由于图表在初始化过程中,需要读取dom元素的宽高以实现图表显示的渲染,但此时已经切换到其他页面,因此在读取dom元素的过程中出现了上述警告内容,并且渲染失败。在activated部分中,自动触发一次echarts图表对象的resize操作,即重新匹配dom元素的宽高。原创 2024-07-18 11:37:02 · 398 阅读 · 0 评论 -
vue2/Echarts 实现模拟slider缩放/拖动松手后触发事件效果
因为Echarts自带的datazoom事件只要拖动缩放条就会触发,过于频繁了,因此想要实现松手后再触发的效果,但Echarts组件内并没有这样的事件,网上也没有查到相关的使用,因此自己尝试用setTimeout函数来模拟了松手触发事件的效果。倒计时结束后,触发想要在松手后触发的事件(此处为reComputeData);若在设置的时间范围内重复触发,则将清除之前设置的倒计时,并重新倒计时;目标:实现图表数据在进行数据范围缩放或变化后进行数据的实时更新效果。在触发缩放事件时初始化一个计时器;原创 2024-07-12 16:22:39 · 625 阅读 · 0 评论 -
Vue2/js 将文件内容转化为Blob对象并创建下载任务
data属性中存放着文件内容,但是是字符串格式,需要转化为Blob(Binary Large Object:二进制大数据对象)后才能进行下载。document.createElement方法创建一个a元素。setAttribute方法定义类型为下载,并赋值文件名。通过调用接口获得了一个文件,格式如图。触发a元素的点击事件,进行下载。原创 2024-07-10 14:22:07 · 277 阅读 · 0 评论 -
Vue2/element-ui 实现el-table表头纵向显示效果
接下来的思路很简单:perf_yearly中的每一个元素对应一个属性在所有年份的值,因此按列打印即可;这样一来,perf_yearly的所有属性名与内部对象的属性名也成为了数组,存储在perf_yearlyColumnList与yearList中。此处涉及到在一个el-table组件内调用两个数组数据的操作:用插槽读取当前索引值,然后调用另一个数组来直接进行显示。如果perf_yearly中的对象内属性名并不相同,可以把prop设为index,通过索引而不是属性名来读取数据。原创 2024-07-09 15:25:07 · 521 阅读 · 0 评论 -
Vue2/js 实现子组件向父组件通信以实现在router-view组件内的自动向下滚动
由于在子组件中自己实现滚动到底部的效果时,需要设置子组件页面自己的高度来允许滚动,导致在router-view视野下出现两个滚动条,很不美观,所以尝试使用$refs通信来实现对父组件页面元素的调用。最终实现自动检查当前是否已经滚动到底部,若在底部,则随日志更新时自动显示最新消息(滚动到底部),若不在则不进行任何操作。父组件在对组件实例进行绑定时,需要选择能滚动的元素来绑定,否则scrollTo方法会报错并失效。目标:通过$refs通信,实现子组件调用父组件,将页面自动滚动至最底部。原创 2024-07-09 14:38:59 · 463 阅读 · 0 评论