随笔分类 - 前端开发
摘要：
1、业务需求 需要加一个按钮，调用第三方API，按钮十分钟之内只能点击一次，刷新页面也只能点击一次 2、思路 加一个本地缓存的时间戳，通过时间戳计算指定时间内不能点击按钮 3、实现 1）vue页面 <template> <el-row :gutter="15"> <el-col :span="4">
阅读全文
1、业务需求 需要加一个按钮，调用第三方API，按钮十分钟之内只能点击一次，刷新页面也只能点击一次 2、思路 加一个本地缓存的时间戳，通过时间戳计算指定时间内不能点击按钮 3、实现 1）vue页面 <template> <el-row :gutter="15"> <el-col :span="4">
阅读全文
摘要：
1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮，复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面，本文实现为跳转到新增页面。 2、实现 1）列表页 index.vue <el-table> <!-- 其他列 --> <el-table-column labe
阅读全文
1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮，复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面，本文实现为跳转到新增页面。 2、实现 1）列表页 index.vue <el-table> <!-- 其他列 --> <el-table-column labe
阅读全文
摘要：
举例：要屏蔽“Missing trailing comma”或“comma-dangle”警告，你可以使用ESLint的配置选项来设置规则。下面是一些方法，你可以根据自己的需求选择其中一种(这里只是举例，其他警告处理方法相同) 方法1：在代码中添加注释来禁用规则 在你希望屏蔽警告的代码行的上方添加如
阅读全文
举例：要屏蔽“Missing trailing comma”或“comma-dangle”警告，你可以使用ESLint的配置选项来设置规则。下面是一些方法，你可以根据自己的需求选择其中一种(这里只是举例，其他警告处理方法相同) 方法1：在代码中添加注释来禁用规则 在你希望屏蔽警告的代码行的上方添加如
阅读全文
摘要：1、业务背景 使用vue+element开发报表功能时，需要列表上某列的超链接按钮弹窗展示，在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗，以此类推多表格弹窗嵌套，本文以弹窗两次为例 最终效果如下示例页面 2、具体实现和问题抛出 <template> <div class="el_ma
阅读全文
摘要：1、业务背景 业务需要做一个父级查询，父级查询的级联组件不显示最后一级，其他层级均显示 2、解决办法 1、页面设计见上文 TypeError: Cannot read properties of null (reading ‘level‘) 2、代码实现 // 获取父子层级列表 async pare
阅读全文
摘要：一、分析问题 1、一个下拉框组件的更新由另一个下拉框组件控制被动更新列表，子级下拉框的值是由父级下拉框的值调用接口获取，每次父级下拉框值的改变都会改变子级下拉框的数据源也就是会改变子级下拉框的options，切换后之前的父级节点找不到就会报了这个错，父级节点不改变(即不切换)的话不会报错 二、解决方
阅读全文
摘要：1、业务背景 还款业务，设置每月还款日，选每月几号扣款，不需要29、30、31，因为不是每个月都有这三天的 2、预期效果图 3、代码实现 3.1 初始化vue项目 地址：https://cn.vuejs.org/guide/introduction.html 3.2 在项目中应用elementUI
阅读全文
摘要：1、业务背景 列表显示字段过多，最后一栏操作列加固定显示，横向添加滚动条，在自测浏览器开发者模式时，发现固定列的最后一行出现了凹陷现象，网上查阅资料大多为在更新生命周期或者页面更新操作时重载页面，这些方法对本文出现的现象没有实际效果，最后的解决办法为直接设置横向滚动条，将列表的高度撑高以此解决问题。
阅读全文
摘要：1、前端页面 <el-row :gutter="20"> <el-col :span="20"> <el-form-item label="数量" prop="quantity"> <el-input class="entity" placeholder="请输入数量" v-model="ruleF
阅读全文
摘要：// JS 计算两个时间戳相差年月日时分秒 calculateDiffTime(startTime, endTime, type) { var runTime = parseInt(endTime - startTime) var year = Math.floor(runTime / 86400
阅读全文
摘要：// 格式时间字符串 formatDateTimeStr(date, type) { if (date '' || !date) { return '' } var dateObject = new Date(date) var y = dateObject.getFullYear() var m
阅读全文
摘要：1、日期选择器组件代码 <el-col :span="20"> <el-form-item label="活动起始日期值" prop="startTime"> <el-date-picker v-model="startTime" type="date" placeholder="请选择日期" va
阅读全文
摘要：1、预计效果如下 2、前端及样式部分 1）el-table <el-table size="small" stripe style="width: 100%" class="table_info" v-loading="loading" :data="list" show-summary> <el-
阅读全文
摘要：参考链接 1）https://github.com/GreenHandLittleWhite/blog/issues/152）https://github.com/GreenHandLittleWhite/blog/tree/master/el-virtual-transfer3）https://g
阅读全文
摘要：1、出现问题原因 安装一个新仓库代码的依赖包，如输入npm install或yarn install，出现如题错误 2、解决办法 1）升级node.js 下载地址：https://nodejs.org/zh-cn/download/ 具体教程可以查看往期文章：nodejs 环境变量配置 2）打开cm
阅读全文
摘要：一、通过setOption的color属性分配颜色范围 先介绍这里提到的color属性 color：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 默认为： ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'
阅读全文
摘要：1、业务需求 将数据显示在饼图内部，格式化百分比显示，鼠标放上去显示具体名称和数值 原样式如下 2、业务实现 调整代码如下，核心语句已标记注释 option = { title: { text: 'Referer of a Website', subtext: 'Fake Data', left:
阅读全文
摘要：tooltip: { // 提示框组件:可以设置在全局(tooltip)，可以设置在坐标系中(grid.tooltip、polar.tooltip、single.tooltip)，可以设置在系列中(series.tooltip)，可以设置在系列的每个数据项中(series.data.tooltip)
阅读全文
摘要：出现问题： 问题如题，出现场景：vscode运行npm命令 解决办法： 有的友友说安装nodejs时用管理员身份安装，右键没找到最后删掉了此文件即可。 这个文件缓存了之前的配置与现在安装的nodejs所包含的npm配置出现冲突。 删除用户文件夹下的文件.npmrc 以上就是Error: EPERM:
阅读全文
摘要：1、业务背景 查询资料此问题出现的原因是：vue页面进行数据渲染时，层次嵌套或者多重数据绑定导致该组件信息框数据不能被Vue实时监听到，以此出现了数据发生改变但页面上更新或删除对应信息框的数据毫无反应的现象，此时需要强制更新，重新渲染。 2、代码示例 1）核心代码 <el-input type="t
阅读全文
浙公网安备 33010602011771号