- 博客(25)
- 收藏
- 关注
RSS订阅原创 element-ui Pagination 分页频繁切换导致重复触发api问题
Pagination频繁切换导致重复触发api问题问题复现问题原因解决问题复现当分页数据足够多的情况下，将分页接入api（api返回值需要重新赋值分页参数），频繁触发分页的下一页。问题原因当我们频繁点击下一页的时候，因为会请求api,在api未返回数据的时候，触发下一页，导致接口又触发。当api结果返回时，因为会重新赋值分页，也就造成了，分页的值改变，从而又触发了api。解决 handleCurrentChange(val) { // 分页切换（原） this.$em
2022-04-01 09:59:31
1611
原创 echarts使用carousel走马灯显示问题
echarts在配合el-carousel循环展示时，显示异常问题问题复现问题原因解决问题复现当我们使用el-carousel包含echarts时，不需要循环，展示的ecahrts图也只有100px宽度，无论echarts图有没有宽度，都限定了100px。如下图展示：后面就想了一下会不会是宽度的问题，所以样式里面直接把canvas的宽度拉满，结果：整个都模糊了。问题原因查阅了很多网上内容，发现当echarts拿不到页面的宽度的时候，会默认展示100px，所以到这里我想了一下，会不会是因为页面
2022-03-07 14:52:47
3190
4
原创 el-image查看大图问题
原由因为上传组件查看大图使用了el-image.但后续发现el-image不管点哪张图片，查看的大图都是第一张官方属性可以看到这里并没有对应的下标。思路因每次不管点任何图片，展示的都是第一张，所以，想着可以把对应开启预览功能的图片数组，第一张替换成用户所点击的第一张图片，然后下标比用户大的，依次排列到后面，小的就最后排列。所以有了以下代码computed: { filesList() { //图片数组集合,idx,为用户所点击的idx return (idx)
2022-03-02 14:57:29
835
原创 el-date-picker限制起期止期
原由写这个是为了控制用户选择不正确的起期，止期。业务代码<div style="display: inline"> <el-date-picker v-model="filters.column.create_start_date" :picker-options="pickerBeginDateBefore" :format-value="dateConfig.formatValue" :type="dateConfig.type" :style="dateConfig.d
2022-01-05 17:26:58
827
原创 el-select使用filterable右侧箭头消失
记录思路写这个是为了记录一哈开发中遇到的问题。现有样式需要修改成修改思路1：在控制台查看对应的dom,发现，使用远程搜索之后，对应的icon的class有变化，如下图所示：2：将上图缺失部分的class补全（el-icon-arrow-up）啊哈，果然就出现了下拉图标。好了，那我们的只需要找到对应的dom,然后添加class就可以了。3：vue项目我就没使用jQuery了，就使用vue跟js的查找dom的方法，首先在对应的el-select中加入个ref,然后使用querySelect
2021-12-31 16:42:41
3587
原创 vue权限指令
Vue权限指令因为项目中需要根据后端返回的权限进行功能的显示隐藏，所以就加了个权限指令。不用写if else进行判断。import Vue from 'vue'export default {}.install = (Vue, options = {}) => { Vue.directive('has', { bind: function(el, binding) { let val = binding.value if (!Vue.prototype.$_h
2021-09-14 11:22:28
456
原创 JSZip解压PDF文件并批量下载
JSzip解压PDF文件并批量下载因需要解压PDF文件并且实现批量下载，但网上找到的基本都是图片的解压和下载，所以参考图片的解压修改了一下。用到了jszip，jszip-utils，file-saver这三个依赖下面进入正题实现zip文件的解压并打包async unZipHandle(arr) { // arr为需要解压的数组 let zip = new JSZip(); let promises = []; // 存放解压的文件 let that = this; // 这里用aw
2021-08-12 16:27:40
791
2
原创 js下载PDF文件流，打开空白问题
记录一下前端下载后端返回的pdf文件流,显示空白问题。const blob = new Blob([content.data], {// type是需要对应的文件类型 type: "application/pdf;chartset=UTF-8", // 这里如果是其他格式的文件，把pdf改为所下载的文件格式就可以 }); const fileName = "文件名.pdf"; if ("dow
2021-07-06 15:15:51
10236
1
原创 el-cascader实现服务器搜索
el-cascader实现服务器搜索文章目录el-cascader实现服务器搜索前言一、产品需求二、使用步骤1.基本使用2.解决用户实时输入问题3.数据过滤问题总结前言这里主要是记录开发过程中，因需要用到级联选择器，以及搜索功能，而官方文档未有服务器搜索的，所以这样记录一下，开发过程以及遇到的问题。提示：以下是本篇文章正文内容，下面案例可供参考一、产品需求需要根据用户输入的进行实时请求服务器数据二、使用步骤1.基本使用代码如下（示例）： <el-cascader
2021-02-04 10:23:41
4216
5
原创 js下载文件流，提示文件损坏问题
记录一下前端下载后端返回的文件流，提示文件损坏问题。const blob = new Blob([content.data], {// type是需要对应的文件类型 type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", }); const fileName = "文件名.xlsx"; if ("do
2021-01-19 11:53:45
10714
原创 记录typescript mixins引入
typescript mixins引入的方法刚开始学习typescript记录一下mixins引入的方法，避免自己忘记。第一种写法import { Component, Mixins, Vue } from "vue-property-decorator";@Component({ mixins: [mixinsName],})export default class name extends Vue {}第二种写法import { Component, Mixins, Vue } f
2020-12-17 16:38:14
189
原创 记录项目使用webpack-parallel-uglify-plugin报错Maximum call stack size exceeded
因项目中使用uglifyjs-webpack-plugin的单线程压缩，所以导致项目打包很慢，而我用不想每次都等这么久。所以打算使用webpack-parallel-uglify-plugin，从而引发了一些问题，就把它记录下来重现步骤npm i webpack-parallel-uglify-plugin引入组件，然后根据问题，将原有的uglifyjs-webpack-plugin压缩的代码 new webpack.optimize.UglifyJsPlugin({ //代码编译后压
2020-12-01 16:41:48
1389
原创 element-ui upload上传功能
upload上传功能加入可拖拽<el-upload ref="upload" :on-change="handleChange" :on-remove="handleRemove" :drag="uploadData.drag" :file-list="fileList" :show-file-list="uploadData.showList" :action="host" :auto-upload="
2020-11-27 10:28:52
599
原创 数组升降序
记录排序升序// arr.sort(arrSortUp('name'))// arr为数组，name为需要排序的keyfunction arrSortUp(name) { return function(obj1, obj2) { var value1 = obj1[name]; var value2 = obj2[name]; if (value1 < value2) { return -1; } else if (value1 > va
2020-10-23 14:27:40
173
原创 vue保留小数点(可自定义保留几位)
vue保留小数点位数（可自己控制）因为最近在做一个商城的项目，所以会涉及到金额。金额也就意味着要保留小数点。所以写了一个指令，方便输入的金额限制。采用指令形式方便控制import Vue from "vue";export default {}.install = (Vue, options = {}) => { Vue.directive("number", { update(el, binding, vnode) { let ele = el.tagName ===
2020-09-30 16:35:12
5208
原创 taro-ui实现省市区三级联动
因taro-ui没有省市区三级联动，所以我们利用它提供的Picker 实现多列选择器。<Picker mode="multiSelector" // 多列选择 onChange={this.onChange} // change事件 onColumnChange={this.onColumnChange} // 某列改变的事件 range={rangeData} //需要展示的数据
2020-06-19 14:10:25
3832
原创 element-ui button防重复点击指令
防止按钮重复点击指令因为手快的同学，再进行按钮操作的时候，会触发多次，若这个点击事件接入API，就会重复请求API。所以为了防止这个问题，我不可能一个按钮去写一个防点击，这多麻烦。所以就写了个指令。下面上代码export default {}.install = (Vue, options = {}) => { Vue.directive('dbClick', { inser...
2019-10-15 20:29:23
6839
原创 el-select滚动到底部加载更多
原由写这个指令主要是项目中有时候下拉框会有很多数据，一次性加载太多又太慢。指令代码import Vue from 'vue'export default {}.install = (Vue, options = {}) => { Vue.directive('loadmore', { inserted(el, binding) { // 获取element-u...
2019-10-12 16:56:31
5071
3
原创 element-ui Pagination 分页请求两次问题修改
Pagination请求两次问题问题复现问题原因解决问题复现当我们请求API的时候，例如API返回总数为456条，我们按照10条每页，一共有46页。当我们选了6之后的页数之后，然后把size选择成100条（目的就是让current * size > total），这个时候，分页就会同时触发size选择函数以及current选择函数。问题原因因为我们的size和current都是双向绑...
2019-10-10 14:44:47
4017
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人