- 博客(108)
- 收藏
- 关注
RSS订阅原创 Highcharts气泡填充图
这里面是对气泡做了一个限制。只取数组前数量最多的20个。对气泡赋上颜色及一些基础设置供大家参考。如果分类种类有很多，一种的柱状图显示出来界面非常拥挤，此时可以使用气泡图来表示。首先我们要下载引入，这里参考此文档即可。
2024-09-05 15:01:04
243
原创 echarts图表--雷达图（参数详解）
雷达图（Radar Chart）是一种用于展示多维数据的图表，尤其适合于比较不同样本或观测在多个相同变量上的表现。在使用ECharts或PyEcharts等可视化库绘制雷达图时，有许多参数可以用来定制图表的外观和行为。
2024-08-02 10:05:12
1134
原创 Upload 上传
可以在上传上传的时候，获取到文件fileList。此时我做的是一个仅限于上传xls文件。这就是一个简易的上传例子，其它延伸的功能点可以通过官网来进行扩展。写一个简单的小例子来整理一下工作中遇见的上传文件功能。对于文件的提交，要使用到FormData。
2024-07-29 16:11:57
246
原创 El-Table 表格的表头字段切换
最近写了一个小功能，比较有意思，特此博客记录。提出需求：需要表头字段变化，但是我在官网上的表格相关上查找，没有发现便捷方法。方法一可想而知代码会比较冗余，而且只改一个字段，改动不大。于是我采用的是方法二，字段替换。这里使用的是组件Tabs的切换。使用当前选择的项不同而切换不同的表头字段。可以通过3个不同的v-if来判断显示的表头，这并不难。难点在于，他可以添加行，每行的数据都是通过一个下拉或者是组件来选择相应的值，我们如何区别每行的值使他们可以相互不影响才是首要解决的问题。
2024-07-23 16:18:36
603
原创 前端常用加密小技巧：encode, MD5,JSEncrypt
JSEncrypt 是一个用于在 JavaScript 中进行 RSA 加密和解密的开源库。它提供了一个方便且安全的界面，可让开发人员在 Web 应用程序中轻松实施加密功能。MD5（Message Digest 5）是一种加密算法，用于生成数字消息或数据的固定长度（128 位）散列值。要使用 MD5，需要使用 MD5 算法对输入数据进行散列。这可以通过使用编程语言中的 MD5 库或使用在线 MD5 计算器来完成。最近工作的时候，写了一个登录注册相关功能，用到了些加密的东西，特此分享~
2024-04-15 15:55:06
1393
原创 数据更新了，vue的界面没有更新？大写的why到底是为什么!!!
当你尝试在mounted生命周期钩子中获取DOM元素时，可能会遇到获取不到元素的情况。为了确保能够正确获取到DOM元素，在Vue的nextTick中获取DOM元素，因为nextTick会在DOM更新之后执行。有一个界面，打开的时候，由于界面显示内容过多导致而出现了滚动条。第一次浏览窗口时，移动了滚动条到底部，此时我们关掉窗口，重新打开他他在底部。我们改变了数组并且控制台打印出来都是理想数据的时候，界面上却显示的为非理想数据。最近工作中，遇见了两个小问题，一时没有反应过来，特此写博客记录一下。
2024-03-29 15:39:25
247
原创 对input输入框做日期输入限制的几种方法
用户输入一个日期的时候，我们如何对其做一个输入限制呢？试想一下，如果你输入一个13月份出来，直接弹框提醒你，会觉得冗余界面复杂，我们可以直接清掉这个3。
2024-01-12 10:48:19
1419
1
原创 scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果，结合animation与@keyframes实现标题左右闪动更换颜色效果。
scrollTop ，offsetTop ，@keyframes ，animation等属性实现一个点击动态滚动标题闪动效果
2024-01-10 15:05:22
1297
1
原创 对token信息解码，JWT原理，jsonwebtoken如何使用？相关的工具介绍。
对token信息解码，JWT原理，jsonwebtoken如何使用？相关的工具介绍。
2023-12-21 09:28:09
543
原创 通过HTTP请求获取数据（resData），然后使用浏览器的下载功能将数据保存到本地文件
通过HTTP请求获取数据，然后将数据以文件的形式下载到用户的设备上。其中，文件名的选择考虑了从本地存储中获取的名为 "nowExportFileName" 的值，如果没有则使用默认的 fileName
2023-12-14 10:25:14
227
原创 vue.draggable拖拽——岗位切换如何判断？
有一个业务场景：把一个单位的某个岗位的人，从某某市A岗位调离出来后，又拖拽回去，如果是回到某某市A岗位，则没有变化，若是换了岗位，则会把色块变成红色，表示岗位的变化。
2023-11-29 10:06:30
292
1
原创 formatter的用法，深拷贝， Object.assign 方法实战。
修改内容，没有点击确定的时候，表格的数据会随着编辑的更新而更新，这是由于数据没有序列化，使用JOSN进行一次序列号。这样row与this.familyPerson.familyPersonForm指向的就不在是一个地址，但是导致的问题则是编辑后点击确定无法更新表格数据。row 是当前行的数据，column 是当前列的数据，cellValue 是当前单元格的值。这样做的目的是为了避免直接修改 row 对象，因为 row 对象是直接从父组件传递过来的，直接修改它可能会导致一些不可预见的问题。
2023-07-28 16:19:43
1222
原创 前端做excel的录入解析，将excel的数据传给后端，显示在页面上。
其中，具体要介绍的是本地的excel表格的数据是如何解析渲染在网页中。2.在方法中写：在这一步就将文件获取，并判断excel中是否包含了姓名和出生年月，同时自己要定义一个默认的表头。5.将excel的人员与系统中的人员做一个对比，若不在系统中，则无法录入。4.会将excel的数据解析成一个表格，可以在表格中做删除操作，点击确定。3.点击上传按钮，会自动打开计算机本地文件，选择想上传的文件，点击打开。6.最后将刚刚加入的人，和以前本来就在表中的人，一起显示在页面上。1.首先写一个文件上传的按钮。
2023-07-13 13:38:11
2547
原创 如何让一个盒子因为内容不同，而样式也不同呢
可以给每个盒子重复一样的步骤，但是显然最简单的方法是用一个循环。循环遍历数据，直接写一个盒子的布局就好了。一样的盒子可以这样做，但是不一样的标记我们应该如何做？例如，每个盒子上面都有一个色块，静态，动态，岗位。如何让不同的内容就有不同的字体颜色和背景呢？这样我们就可以根据不同的内容来给定不同的样式啦！绑定一个class，通过内容来绑定不同的样式。
2023-07-10 17:16:30
370
原创 解决刷新或者重新点击导航栏，对应的侧边栏选中状态丢失或TAB页面与选中状态不符合
使用路由监听，解决侧边栏刷新掉选中效果与对应的tab页面不符合的问题
2023-07-04 17:34:29
1299
原创 如何处理el-table多级表头及减少全局定义变量。
el-table多级表头处理方法，了解lebel和prop的真实含义，template的意义，如何减少全局定义变量。
2023-06-29 14:34:01
2067
1
原创 树形控件父节点不选中，只能选中子节点，如何实现？
接上一篇博客，继续深入功能，如何只选中叶子节点而不选中父节点。父节点的leaf为false，子节点为true。
2023-06-25 13:44:50
2588
原创 el-input使用clearable，:title,MessageBox弹框外部关闭，el-Dropdown 下拉菜单详细举例，el-table的show-overflow-tooltip是什么？
3.像某行文字过长，比如一个系统有少数民族使用的情况，虽然可以做单行文本强制不换行，省略号显示，但是为了交互性，最好我们加一个:title=“ （V-model绑定的内容）”，在鼠标摸上去的时候，会有详情以标签的形式显示出来。设置:show-overflow-tooltip="true"属性可以使单元格超出的内容自动折叠显示为...当鼠标移入时单元格的上方会弹出一个小tips来显示单元格得所有内容。解决方案是给蓝色部分的样式增加一个宽度，做一个限制即可，便可保证清楚标志在input的输入框内。
2023-06-16 17:29:31
1436
原创 两个vue文件的外层class名一样，样式会相互影响，怎么避免名字相同但是不被影响。
要使用CSS Modules，只需在Vue组件的style标签中添加:module修饰符，然后在class名前面添加$style即可。CSS Modules是一种将CSS作用域限制在组件内部的技术，它可以确保每个组件的class名都是唯一的，从而避免了样式冲突的问题。当两个单文件Vue的class名相同时，它们的样式会相互影响。为了避免这种情况，可以使用CSS Modules。
2023-06-08 17:24:54
967
1
原创 Tree 树形控件一级菜单没有复选框，子菜单有复选框，如何实现？
现在的需求则是，A页面使用该组件不希望出现复选框，B页面使用该组件能进行多选，则需要用到复选框，并且根结点没有复选框，不支持选中的情况。第一行代码是当一个节点是叶子节点时，它的后面的复选框会以行内块级元素的方式显示出来。多选时，用的check-change，将每次选择的对象放进数组中，返回给需要的页面。第三行的意思是如果一个节点既是叶子节点又是父节点，它会在树形结构中显示出来。第二行代码是当一个节点不是叶子节点时，它的复选框会被隐藏起来。在父组件中，直接在引用子组件的地方，加上一个属性。
2023-06-06 18:13:13
1538
原创 给若干属性绑定相同的事件名，如何区分？
这段代码是一个Vue组件中的方法listenBlur，它接收两个参数e和name。当name的值为'msl'、'dj'或'zj'时，它会将e.detail.value转换为数字，并使用this.toFixed方法将其保留小数点后指定位数，然后将结果赋给this.HpDetail中对应的属性。最后，它会调用compute方法，并将name作为参数传入。这段代码的作用是在用户输入某些数值时，对其进行格式化和计算，并更新组件中的数据。
2023-05-19 14:24:04
82
原创 el-input,el-select的简单使用，如何通过单位查找岗位，并对该记录添加或者删除。
在每个元素中，我们使用el-input指令来渲染干部的任职单位输入框，使用el-select指令来渲染干部的任职岗位下拉框。同时，我们还提供了一个“+”按钮和一个“-”按钮，用于添加和删除干部的任职单位和岗位信息。在回调函数中，我们将value.zwmc和value.ZsID分别赋值给一个新的对象的zwmc和ZsID属性，然后返回这个新的对象。执行后有多条数据，只有一条数据时显示一行，一行的最后有个+按钮，当数据大于等于2时，数据后会有一个+和一个-号按钮。点击加号，push一行，点击减号，删除一行。
2023-05-17 10:37:33
283
原创 el-checkbox如何获取所在行的ID
用于将干部的任职信息中被选中的职数的zwID属性提取出来，并存储在this.ZWIDS数组中。其中，filter方法用于过滤出被选中的职数，map方法用于将职数的zwID属性提取出来，并存储在this.ZWIDS数组中。如果你想要在你的代码中使用这段代码，你需要将它添加到你的Vue.js组件的模板中，并且定义一个rzArr数组，用来存储干部的任职信息。
2023-05-17 10:13:21
330
原创 弹框组件，如何响应式更新
功能需求：改变时间，处理结果，具体内容时，不需要再选一次解析至任免表，解析详情自动解析。对需要实现更新的地方绑定一个事件，在事件中处理相关逻辑。点击是否解析到任免表的是时，会将监听这一动作，解析出来。这里我使用的是change事件。1.使用watch侦听。3.change事件。
2023-05-16 17:52:45
126
原创 Select 选择器，如何将选项内容永久保留在输入框中，刷新，重新进入页面不会丢失。
此时，我们要实现这个功能，只需要在mounted中，加载页面选中，赋值使用v-model绑定变量即可，需要在页面加载时将变量设置为之前选中的值。
2023-05-16 17:41:11
891
原创 Vuex的实际应用，请求接口API的另外一种写法，less和sass的区别，SaaS，Paas，Falsy ，EventBus ，如何强行改变elementUI的样式。
Vuex的实际应用，请求接口API的另外一种写法，less和sass的区别，SaaS，Paas，Falsy ，EventBus ，如何强行改变elementUI的样式。
2023-04-11 17:42:02
423
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人