- 博客(49)
- 收藏
- 关注
RSS订阅原创 前端上传excel并解析成json
本文介绍了前端实现Excel文件上传、解析并渲染到表格的完整流程。首先通过el-upload组件实现文件上传功能，使用XLSX.js库将Excel文件转换为JSON数据并存储到localStorage。然后通过映射方法将中文表头转换为所需格式，处理借贷方金额生成交易金额字段。最后实现分页功能，通过计算属性paginatedTransaction获取当前页数据用于表格渲染。整个过程涵盖了文件上传、数据解析、格式转换和分页显示等关键步骤，实现了一个完整的Excel数据导入和展示功能。
2025-08-18 11:20:13
326
原创 申请服务器域名部署的流程
本文概述了网站部署的基本流程：1）购买云服务器（推荐阿里云/腾讯云，选择1核CPU+1-2GB内存配置）；2）在腾讯云购买域名并完成实名认证；3）域名解析设置（添加A记录指向服务器IP）；4）前端项目部署步骤：使用Xshell连接服务器，通过宝塔面板安装LNMP环境，配置Nginx（添加server块指定项目路径），最后上传打包文件到指定目录完成部署。全过程包含服务器选购、域名注册、DNS解析和前端项目部署等关键环节。
2025-08-11 17:17:44
520
原创 获取vue.config.js里代理的路径
vue.config.js 主要用于配置 Vue CLI 的构建和开发服务器选项，不能直接拿到里面的值，如果是自己重新写的config，引入到页面就可以拿到。vue.config里不能使用变量，所以可以写个备注，如果需要改的话，顺带把新创建这块的也改掉。在public目录下创建config.js，然后在同级目录下的index.html里引入。下面说，我的解决办法，如果有更好的，一定要给我说啊。然后在页面上就可以直接用了。
2024-11-01 19:06:00
543
1
原创 修改ruoyi的logo和标题
如果你的图标文件名不是favicon.ico，你还需要在public/index.html中相应地修改这一行，将/favicon.ico替换为你的图标文件路径。在src目录下的layout/components/Sidebar/Logo.vue文件夹，将里面的title: '若依管理系统’替换成你网站的名称。修改public/index.html文件中的 title 标签，文件为你自己的图标文件。在vue.app文件中。
2024-11-01 18:56:01
1558
原创 vue项目内网部署流程
复制 ycfx.jar 文件到自定义路径，然后在此路径下打开 cmd 窗口，输入指令 java -jar ycfx.jar （jar包名称） 回车后等待程序启动完成即可，启动完成后不要关闭该窗口。数据库，输入数据库名称 ycfx,然后点击 ycfx 右击，选择运行 sql 文件，选中 ycfx.sql 所在的。位置，点击开始，等待提示 finish sucessfully 后点击关闭，然后右击 ycfx 选择刷新，就会在。，安装完成后，win+r打开cmd，输入javac 查看是否安装成功。
2024-06-28 11:39:08
1794
原创 vue项目连接多个服务后台地址
场景描述：由于公司项目需要基于若依框架和starlingX后台开发，所以，项目至少要连接两个后台地址。在 vue.config.js 文件里 添加一个地址。新建一个接口请求文件，并引入request.js文件。
2024-06-28 10:00:04
1238
原创 el-table中添加switch 且绑定值为0和1
switch开关经常用在是否启用的场合，但是switch默认绑定值的类型是布尔类型，即true和false，在实际的项目中，后端的接口都会用0和1来代替，如何将数值与状态进行关联呢？
2023-11-17 16:11:06
1757
原创 vue 将表单设置成只读模式
这个事件 也可以穿过该元素，点击到该元素下面的元素，比如 canvas这个按钮挡住了无法点击，按钮功能就无法实现，就可以设置 pointer-events: none；个人觉得 这个方法 页面虽然很明朗 但不美观 而且 如果表单很多的话 就得一个一个加 很麻烦。用div包起来 提高层级 背景色可以不设置 也可以设置为透明色。这里有个问题就是 如果用 tab 键还是可以选中的。但是缺点是 可能滚动条会滚动不了。
2023-06-06 12:30:00
2071
原创 vue将路由改为history模式下并设置路由base
那就可能是assetsDir 路径错误。在传递router配置里添加。到这里会发现页面无法访问。
2023-03-23 17:50:25
1359
原创 常用js方法集合
数据字典 ：首先在app.vue里调用 this.$commonly.initDict();文件是请求数据字典的接口文件**、storage .js**文件是封装缓存方法文件。创建一个commonly.js在utils目录下。刷新页面 就可以看到缓存里的数据字典了。文件就是页面路径文件、在main.js里注册。
2023-03-06 18:02:42
250
原创 vue中echarts视图不更新
最近写了一个可视化，遇到最多的问题就是， 封装成组件 接口返回来。总结下来就是 监听是真香 后来遇到的很多问题都是用监听解决的。， 或者切换数据有数据 ，但可视化。2、在组件里监听数据有变化 手动赋值。1、直接在组件里判断有数据就可。问题就是数据只在第一次更新了。
2023-03-01 12:17:45
1279
原创 assets和static的区别
3、推荐assets中存放自己的资源（css、images、utils等），static中放第三方资源（pdf.js、iconfont等）4、动态绑定中，assets的图片会加载失败，因为webpack使用commonJS规范，需要使用。webpack处理，打包后直接复制到dist（默认是dist/static）下。webpack处理，打包后会在dist中合并成一个文件；3、资源通过import引入，都可以在html中使用。2、如果资源在html中使用，都是可以的。1、都是用来放静态资源的。
2022-12-12 17:20:08
768
原创 类型和id对应的两个数组
两个picker进入的组件是一样的，保存传参数的时候需要把两个分别选中的数组id放到一个数组里，type放到另一个数组里，但这两个数组的type和id需要对应起来。因为返回的数据没有type，两个类型也是固定的值，所以拿到数据后，先自己给他push一个type。首先在进组件页面的时候，给一个参数，方便判断是哪个选择进的页面。先合并选择到的两个数据，然后拿出只有id和type对象的数组。组件接收数据后，在抛出数据的时候把type值也传出来。然后在保存数据传参的时候处理数据。做个数据处理的小记录。...
2022-08-09 16:19:35
173
原创 indexof和includes的区别
数组中的indexof方法判断字符串是否包含子字符串（包含的话就返回字符串所在位置，不包含返回-1）语法：indexof（searchElement，fromIndex）fromIndex(可选。从该索引处开始查找searchElmentui)数组中的includes方法判断一个数组是否包含一个指定的值（包含返回true,不包含返回false）语法：includes（searchElement，fromIndex）fromIndex(可选。从该索引处开始查找searchElmentui)indexof和
2022-06-29 10:34:13
237
原创 vue + elmentui 表格相关
1、实现动态表格数据结构必须如下：2、表格高度3、自定义表头样式4、自定义表头5、elmentui 实现el-table列宽自适应
2022-06-27 15:42:24
794
原创 vue 导出excel
用xlsx插件1、安装依赖包2、创建一个commom.js文件3、在表格上加上id4、在页面引入方法5、在按钮上添加click方法就可以实现导出了
2022-06-15 18:19:35
214
原创 跳转页面后回不去默认页面
问题记录：默认页面跳转页面后 浏览器自带的返回箭头没有了 也就是不能返回。问题本质：路由跳转 replace和push的区别helpCenter(){ this.$router.replace('/hc/index') },区别： this.router.push跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面this.router.push跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面this
2022-05-23 15:46:21
729
原创 回顾Object.defineProperty
回顾Object.defineProperty方法：let number = 18let person = { name:'张三', sex:'男',}Object.defineProperty(person,'age',{ value:18, enumerable:true, // 控制属性是否可以枚举(遍历),默认值是false writable:true, // 控制属性是否可以被修改，默认值是false configuranle:true, // 控制属性是否可以被删
2022-05-20 13:07:47
157
原创 查找字符并判断
需求：当客服等待时间为天的时候，字颜色变红结果如下图：解决：首先用js内置方法indexof（简单来说就是得到数据的索引，如果查询到返回索引，反之返回-1）封装一个函数，再把需要判断的值放进去，然后添加动态class封装的函数如下：isRed(e){ if(!e) return; if(e.indexOf('天')==-1){ return false } else{ return true } },表格判
2022-04-24 11:11:29
289
原创 elmentui Tree组件单选问题以及清除选中状态
1、实现单选功能：主要利用tree组件中的check、setCheckedKeys方法，需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。<el-tree ref="tree" :data="data" show-checkbox node-key="dictCode" :props="defaultProps" @check="handleCheck"
2022-04-11 15:44:23
12969
1
原创 创建当前时间
创建当前时间：getTime(){ var date = new Date(), year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), minute = date.getMinutes() < 10 ? "
2022-04-07 16:22:55
263
原创 uniapp下一项功能
上篇是数据返回全部消息，为数组时，本篇是接口每次只返回一条消息，并且 每天弹过的消息只弹一次。每日只弹一次：传参数的时候需要把msgid拼接到一起，所以把每条已经弹过的msgId和当天的时间储存到本地，在调接口之前，先取出已有 的id，如果已经有id就拼接/** * 获取接口消息 */ getMsgData() { this.$u.api.msg.getNotifyMsg({ receiveStatus: 0, excludeMsgIds: this.g
2022-03-23 17:12:13
448
原创 uniapp 消息列表 下一项功能
查看消息列表的时候，会有下一项这个功能，如下图：首先得判断下一项这个按钮是在什么情况下出现：<view class="flex-around mt-20"> <view :class="count<2 ? 'bg-orange text-xl round-3 planWidth' : 'bg-theme text-xl round-3 px-n20 py-20'" v-if="isPlanShow" @click="addPlan"> 创建检查计划
2022-03-19 14:42:53
1282
5
原创 poup组件自适应高度
用tm-vuetify框架中的tm-poup组件 高是固定死的 但需求是自适应高度，给height值传个max-content，内容的最大高度，就可以实现自适应高度了。<tm-poup v-model="show_1" :position="pos" height="max-content"></tm-poup>...
2022-03-18 11:05:01
432
原创 vue 将后台数据时间戳转换成日期格式
在 src 下新建一个 common 文件夹，创建 date.js 文件，方便多次复用export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+':
2022-03-04 14:41:31
682
原创 Error in v-on handler: “TypeError: Cannot read properties of null (reading ‘getElementsByTagName‘)“
在表格导出的时候出现这个错误，是因为把id获取错误因为封装的方法里有id,但是页面上面没有找到，所以报错 /** * 导出 * @param mainTitle 主标题 * @param subTitle 副标题 * @param reqData * @returns {any} */ exportTable(mainTitle,subTitle,reqData){ /* generate workbook object from table */
2022-02-28 18:14:15
4697
原创 vue 报表下钻功能开发
拿到areaCode初始值，下钻的时候把点击获取到的areaCode赋值上去就可以实现下钻功能let data = { areaType: this.areaType, // 后台默认是1 areaCode: this.reqData.areaCode, } ceApi.getcqData(data).then(res => { if (res.success) { this.loading =
2022-02-28 18:01:16
2476
1
原创 vue点击按钮切换样式
点击全部 切换样式给一个click点击事件，动态样式绑定两个class（vue官网：绑定class的对象语法）<view class="type round-15" @click="whole" :class="{type:ys1,type_tips:ys2}">全部</view>用true和false判断ys1:true,ys2:false,方法：whole(){ // 当点击第一次时，ys1从true变为false,Style样式type就会隐藏 // 再
2022-02-16 13:31:55
11939
2
原创 vue自定义按钮单选和多选
自定义按钮单选：单选样式如上用for循环出每一项的Index作为判断依据，index改变后 把index给num,改变其动态样式。此处的样式用的是tm-vuetify框架里的样式，动态的样式必须写在style里，否则不起作用。<view class=" flex flex-wrap"> <view class="type flex-center text-size-n ma-20 mb-5 py-20 px-20" v-for="(item,index) in punishLi
2022-02-15 13:24:50
2563
原创 监听浏览器左侧宽度计算距离
问题：左侧的tab栏切换需要定位在左侧方案一：我先想到的是相对定位，但由于上面的两个tab切换是组件，所以在下面定位出去 他就会消失，也就是隐藏，脱离文档流了，但也会隐藏，不知道原因。后来用了固定定位，可以出现 但不能自适应。方案二：在首页分为两个盒子。问题出现：头部会被撑开方案三：监听浏览器左侧的宽度 计算距离（可以实现）首先给整体的tab栏加个动态的固定定位样式<div class="tab" :style="{position: 'fixed',left:flexLT.lef
2021-12-08 11:21:27
569
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人