- 博客(43)
- 收藏
- 关注
RSS订阅原创 el-tree 或 el-tree-select 根据条件，控制节点的显示隐藏
要求el-tree-select 的节点根据节点数据状态来进行显示隐藏（状态字段为status，显示：‘1’，隐藏：‘0’）
2024-04-25 15:28:30
316
原创 electron-builder 打包问题，下载慢解决方案
项目使用了Electron，在第一次打包时会遇见下载慢，导致打包进度几乎停滞不前，甚至可能直接报错其实这是因为Electron 的源在国外，我们直接下载，大家都懂，这下载速度堪称龟速......
2024-03-19 16:21:07
767
原创 echart宽度100px原因（解决el-tabs里的echarts图表宽度不自适应，只有100px问题）
首先echart初始化的组件宽度设置了width: 100%，那么本来这个时候，echart图表会根据父级自适应宽度。但因为el-tabs标签页，一开始的状态是display：none，也就是没有宽度，这个时候ehcart获取不到父级宽度，就会默认的给一个100px的宽度
2023-11-09 10:01:57
1662
原创 el-tree 懒加载数据，展开的节点与查询条件联动，且对查询的节点进行定位
其实这个联动，主要是搞懂el-tree的node-key和属性就行。简单来说，就是你想展开哪个节点，就把该节点node-key对应的字段放入default-expanded-keys对应的数组中。其他的就是对数据的处理把接口获取到的数据处理成你想要的样子，这是前端在很多时候都要做的事情。
2023-09-07 11:44:09
2195
原创 解决el-table树形数据量过大，导致卡顿问题
element-ui里面的树状表格，当层级和数据过多的时候会出现点击展开和折叠的时候卡顿。这种处理方式会在展开过多时慢慢变得卡顿，所以需要提供一个逻辑，使得用户可以一键回到第一层，且卸载所有子节点。我以为是源码里的逻辑不好，debug源码，但是没有发现原因，后求助同事，得出是dom元素过多导致的。在点击展开的时候，改变display样式，因为元素位置变化，页面发生回流，且元素多，所以开销大。一次性加载所有数据的时候，折叠的元素都已经加载了，只是样式为dispaly：none；
2023-06-30 10:29:04
4025
12
原创 el-date-picker 结合dayjs 快速实现周选择、月选择，并设置控件的显示格式
el-date-picker 结合dayjs 快速实现周选择、月选择，并设置控件的显示格式提供选择器，可供选择为 按月选择 或 按周选择这里给el-date-picker 按周选择，配置了周起始日为星期一。
2023-06-15 15:07:32
2594
4
原创 谷歌浏览器请求 strict-origin-when-cross-origin 跨域问题，解决方法之一
项目打包部署在内网后，index.html 里通过script标签引入的其他链接资源不能正常请求，报的是跨域错误
2023-04-04 11:44:08
4964
原创 nginx 部署vue项目，路由模式为history时，页面刷新404问题
因为打包部署后，地址栏的地址只是vue的路由，并不是真的文件目录地址。所有的路由都是依赖于SPA单页应用的index.html。所以当刷新时，按照地址栏的地址，找不到对应的文件，就产生404。
2023-04-03 15:29:42
3007
原创 Day.js 安装使用，以及常用知识点记录
Day.js 好用的日期 js 库包含大量对日期的处理方法，在我们平时的日期处理上，给予了很大的帮助！
2023-03-06 11:11:11
994
原创 echart 仪表盘绘制（适用于需要显示当前进度的图表）
看了下echart上的例子，没有现成的，所以自己找了找配置，然后写了一个。发现是因为项目使用的echart版本是4，而官网已经是5了。在写的过程中发现，官网上调整好的代码，在项目中显示出错。这里我针对两个4、5两个版本都配置好了。项目需要显示当前设备温度的图表，如下。
2023-02-17 16:15:23
893
原创 前端随笔（问题记录、知识点存储），持续更新中
1.el-dialog打开后，页面布局发生偏移2.el-table 错误复用之前的表格列，导致新表格内容展示错误3.监听浏览器本地缓存的方法4.通过 iframe 简单实现多系统快捷登录（类似单点登录效果，支持跨域）5.VS Code代码提示突然没有了6. 为什么通过ref获取到的组件，有时候是个对象，有时候是数组？（为什么通过ref获取到的组件，调用不了它里面的方法？）7.为什么el-input-number 在人为清空后，用代码进行赋值会失效？（清空后赋值失效）8.js 四舍五入方法实现
2022-12-09 15:02:56
252
原创 onlyoffice协同编辑（多人共享编辑）、在线文档编辑，支持word、excel
onlyoffice协同编辑（多人共享编辑）、在线文档编辑，支持word、excel
2022-12-08 10:21:15
5418
2
原创 微信小程序阻止事件冒泡
在vue中阻止事件冒泡的方法使用的event.stopPropagation(); 但微信小程序中事件传递的event却没有stopPropagation()这个方法
2022-10-14 09:54:30
2934
原创 vue-treeselect 问题合集、好用的树形下拉组件（vue-treeselect的使用、相关问题解决方案）
vue-treeselect 使用及相关问题解决方案，持续更新！！！最新更改：继续优化【问题五】的第二种解决方案（将vue-treeselect + 拖动改变宽度方法进行二次封装，可直接重复调用，增加 saveOldWidth 属性，用来是否保存上一次组件宽度）复制代码即可上次更改：1.@input 事件里，想要拿到node参数，而不是value参数2.优化【问题五】的第二种解决方案（考虑页面上存在多个treeselect）文章只记录部分问题，完整的 组件属性 及 组件的事件 等 可到文档中去查阅
2022-09-28 12:36:36
18159
42
原创 vue的中央事件总线，实现任何组件之间的相互通信
这篇文章主要说vue的中央事件总线，并且选择的方式是直接创建一个vue实例，并将其挂载到vue的原型上（Vue.prototype），这样我们就能在任意一个vue组件中进行方法调用。这样实现起来我认为更为简便直接。在main.js文件中代码如下：
2022-09-20 09:58:05
329
原创 el-tree设置默认展开节点后，el-tree点击节点不能关闭（触发node-collapse事件，节点无法关闭）
项目中使用到el-tree， 考虑到数据量还是有这么大，就想将用户对节点的操作保存下来（保存用户已点击展开的节点id，在下一次进入或刷新后，对其进行默认展开操作）问题：在后面测试中发现点击第一级展开的某些节点，节点竟然无法关闭。。。。。
2022-09-19 18:12:03
3324
6
原创 前端拼音（汉字）检索，好用的插件 pinyin-match
好用的前端拼音检索插件（汉字也可检索），无需请求后端接口，只需针对当前已获取的数据源进行操作，对符合条件的数据进行返回显示，即可完成拼音检索
2022-08-12 09:17:35
1448
原创 elementui 弹窗遮罩问题；Message层级问题（被遮罩、弹窗遮住，设置层级；弹窗内容被遮罩遮挡）
解决弹窗内容被遮罩遮住、弹窗层级样式不够问题情况一：弹窗层级样式不够。elementui文档上，Message板块有写到可以提供自定义class。通过自己设置类名，可以对其设置相关css属性。情况二： 弹窗内容被遮罩遮住。
2022-07-22 15:13:55
10211
2
原创 vue 实现行拖拽，不满足条件时可还原数据
本篇文章主要是想记录拖拽时进行条件判断，若条件不满足则数据不变（还原数据）的情况。这个条件判断、还原数据的方法，我也是在网上查询总结出的，发现这方面的东西不好找，自己做个记录，方便以后查询在要使用拖拽的组件进行引用js代码拖拽条件判断首先我们需要设置 forceFallback: false (设置了这个，才能达到条件不满足，还原数据的效果)在onMove中进行条件判断，如果不满足条件，进行 return false。......
2022-07-05 11:45:48
573
原创 echarts 数据过多，柱状图产生重合
项目使用了echarts图表对数据进行展示，初始测试数据还不多时，图表正常展示，未发现问题。当项目后期，加入大量测试数据后，展示出现柱形重叠现象，效果看着不舒服，开始找了下解决方案，先使用了dataZoom组件 用于区域缩放(滑轮滚动)，效果如下：...
2022-06-17 11:09:13
2104
2
原创 vxe-modal根据弹窗高度、弹窗内容，自动改变弹窗位置
使用vxe-modal进行开发，当弹窗里存在el-tabs切换时，点击第二个tab页，因为第二个tab页里内容过多，弹窗的高度会自动增加，但是弹窗的位置并未改变，就会有部分内容被遮住。
2022-06-02 17:55:59
4020
原创 el-table 自定义序号增长(后端分页，前端表格序号根据当前页码变化）
给兄弟们直接上代码解决问题：后端分页，el-table序号每一页都从1开始增长用法简单，直接实用<el-table-column type="index" label="序号" width="80"> <template slot-scope="scope">{{(currentPage - 1) * pageSize + scope.$index + 1}}</template></el-table-column>实测可用！表格序号能够根据页
2022-05-17 17:47:56
609
原创 前端实现分页功能，重点是对绑定的表格数据进行简单处理
目录文章说明1. 表格数据进行绑定（最重要的一步）2. 使用element ui 分页组件3. js部分代码文章说明虽然现在后端都会对数据做分页处理，但不排除在某些模块，当需要显示的数据量不是很大时，前端可以自己做一些分页处理。所以用本篇文章记录下，方便以后查阅。1. 表格数据进行绑定（最重要的一步）<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" size="mini"
2022-05-17 17:28:03
484
原创 解决vxe-table编辑单元格时，自定义渲染模板(结合element ui的标签组件)
目录HTML样例实现方法安装vxe-table-plugin-element插件实测可用！HTML样例<vxe-table-column field="destination" title="目的地" width="300px" :edit-render="{type: 'default'}"><template v-slot:edit="scope"> <el-cascader v-model="scope.row.destination"
2022-05-09 19:51:08
2662
原创 前端文件导入(FormData形式)，并隐藏原input file标签后面的提示文字
目录效果图原理html代码js代码以上即可完成任务效果图导入数据按钮点击后，弹出文件选择，最后选择文件进行导入原理用el-button来代替原生的input标签显示，设置input标签样式为display: none; 在点击el-button按钮时，获取input元素，并触发其点击事件html代码<el-button size="mini" type="primary" @click="toImport">导入数据</el-button><input t
2022-05-07 17:04:51
537
原创 前端文件下载（导出数据、图片验证码、出现乱码），通过后端接口获取到文件流，并在浏览器下载（显示）
目录1.文件流，对应的文件下载axios请求时请求成功后处理，并通过创建a标签进行下载2. 图片流，对应的图片显示（图片验证码）axios请求时请求成功后处理图片验证码效果图1.文件流，对应的文件下载axios请求时因为后端接口返回的是文件流形式，所以在用axios进行请求时，要加上responseType: ‘blob’；如下：post请求：return axios.post(url, data, {responseType: 'blob'});get请求:return axios.get
2022-05-07 16:45:59
629
原创 antd 排序后修改鼠标悬浮在表头的提示文本
在使用antd 进行开发的时候发现了个问题当我在对表格进行排序后，悬浮在表头上时提示的是英文，这看起来多不舒服！！！解决办法在花费大量时间查阅了antd官方文档后，还是没发现解决办法，最后看到可以知道，我们能够通过设置local属性进行修改提示文本，但文档中却没有给出对象中具体对应的键值，最后去网上查到了设置完成后，成功！！！...
2021-04-26 11:46:31
1572
2
转载 Vue组件之间的通信方式的总结
面试中，经常会问到vue中组件间的通信方式有哪些？今天我们就来总结下。vue中组件间的通信方式props / $emit这是我们比较熟悉的方式，主要是父子组件之间的传递方式，父传子使用props，子传父使用 $emit，直接上代码：父组件传子组件首先在父组件的子组件标签中绑定一个自定义的属性<user-detail :age="age" /> export default { components: { MyAge } ....
2021-04-09 09:43:05
104
原创 为什么Vue组件中的data是一个函数，而不是一个对象
Vue组件中data为什么是一个函数首先我们来看一看Vue官方文档上的一个demo可以看到在这个demo中，data是一个对象，通过new一个新的Vue实例，将data中的message属性直接渲染到页面上。但是在官方文档的组件基础部分，在讲到组件的复用时说到一个组件的data必须是一个函数那么究竟是为什么呢？相信很多刚接触的小伙伴都有这个疑问。让我们首先来看一下官方文档的解释文档中提到，当组件的data是一个函数的时候，在每一次实例化这个组件时，都会得到一份独立的拷贝，那么当这个组件在复用时
2021-04-08 09:55:11
635
1
原创 前端实现复制文字功能 Vue+ELement UI+vue-clipboard2
Vue+ELement UI+vue-clipboard2实现复制功能首先安装依赖npm i vue-clipboard2 --save在main.js中进行引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard);直接进行使用v-clipboard:copy=“address” 指定复制的数据v-clipboard:success=“onCopy” 复制成功后调用的方法v-clipboard:e
2021-04-07 17:02:12
320
element ui 离线文档 2.15.7
2022-12-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人