自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(354)
  • 资源 (14)
  • 收藏
  • 关注

原创 Ant-design-vue Table 列表 columns 将作为导出功能入参

引入了 processColumn 函数,用于处理单个列对象。如果列对象具有子列(children),则递归调用 handleExportColumnsData 处理子列,并将处理后的子列添加到结果对象的 children 属性中,从而实现处理多层级嵌套的数据结构。getEnumMap 的第一个入参 type 支持字符串映射 store 中的属性,也可以直接传入枚举值数组,然后使用 reduce 将数组转换为对象,这里 key 和 value 是枚举值数组中的 key、value 字段名。

2023-10-27 11:33:46 435

原创 JS 多字段拼接为字符串,并处理掉 null 的情况

首先使用 map 方法将每个字符串的值提取到一个新数组中,然后使用 filter 方法过滤掉未定义的值,最后使用 join 方法将这些非空的值。上述代码片段中,使用 formatField 用来格式化字段,combineFields 用来组合所有字段,且使用 map 和 join 方法更简洁地组合字段,减少了多次字符串拼接操作。根据多个字段,动态拼接显示 label 字符串,由于字段的值存在 null 的情况,我们又将如何将 null 从字符串中去除呢?

2023-10-27 11:02:16 364

原创 日常代码优化实现过程

in 循环来遍历 object 对象的属性,并使用 filter 函数来检查 data 数组中的元素,看它们的 key 属性的值是否包含在 list 数组中。将状态值和对应的消息被提取到了单独的配置对象,函数 handleCheckStatus 接受这些配置对象作为参数,使得验证逻辑与具体的状态值解耦,提高了代码的灵活性和可维护性,并且错误消息的显示逻辑被抽象为了一个独立的函数showWarningMessage,这样可以方便地进行统一的消息显示管理,也增加了代码的可维护性。

2023-10-23 17:15:21 226

原创 JavaScript 将树形结构转换一维数组(递归)

将树形结构转换为一维数组是一个常见的任务,通常使用递归或迭代的方法来完成。flattenTree 函数递归地遍历树的每个节点,并将节点添加到结果数组中。如果节点具有子节点,它会继续遍历子节点。最终,你将得到一个包含树中所有节点的一维数组。getOneArr 使用了递归方法,它接受一个包含树形结构数据的数组 data,并将其转换为一维数组。将数据结构从多维树状结构变成一维数组,然后删除了原始数据中的子节点,最后输出一个一维数组,其中包含了所有节点的数据,同时删除了子节点属性,使其成为一个扁平的结构。

2023-10-20 11:30:12 860

原创 vue2-org-tree 树型结构的使用

使用 labelClassName API 给 label 上的 class,从而实现定义 label 样式。// 定义 label 样式},我们可以看到常量 colorObj,其对象中的 key 值是定价类型,value 值是所对应的 class 名称。

2023-10-18 16:33:53 612

原创 ant-design-vue table 同时勾选或者取消勾选某字段值相同的数据

使用 rowKey 将其绑定为某个字段(这里指的是我们该字段相同的值同时勾选或者取消勾选的字段),这里的确可以实现样式上的同时勾选,但是 selectedRowKeys 和 selectedRows 都只有一项数据,勾选后统计勾选的数据信息汇总就存在问题了,因此我们如何实现该功能呢?Ant-design-vue 库中 Table 组件 API 有个 rowKey 属性:表格行 key 的取值,既可以是字符串,也可以是一个函数,它在 rowSelection 选择功能的配置中尤为重要。

2023-09-06 16:39:00 792

原创 JavaScript 中根据相同 key 对应的值,将一维数组转换为二维数据

实现思路:遍历 input 数组,使用 obj 对象存储以 code 为 key,遍历项为 value,同时向结果集 result 中添加该数据,如果 obj[code] 已经存在了,直接遍历 result,找到相同的 code,添加 name 到 list 中即可。从 input 和 output 两个数组中可以看出,使用 code 进行分组,将 code 值相同的 name 放入到 list 数组中。上述中我们注意利用了对象 obj 键的唯一性,当然我们也可以使用 Map 来实现。

2023-09-06 11:01:17 269

原创 JavaScript 中根据 key 合并不同的两个数组

将 source 和 target 两个数组合并成为 output 数组。我们可以看到 source 和 target 两个数组是通过 id 对应的值进行合并的,这里使用遍历 target 数组,遍历的每一项都与 source 使用 find 方法去找到对应 source 数据。由于考虑到 source 和 target 数组中可能存在相同的 key, 所以我们使用回调函数将结果返回,默认直接将 source 数据和遍历的 target 项一起返回。

2023-09-05 17:36:42 191

原创 axios 请求和响应拦截器

通过响应拦截器我们用来处理响应异常的接口进行拦截提示,返回对象中会返回一个 succeed 字段来表示接口处理正常还是异常情况,当然也有可能直接返回文件流,因此这里使用的 ‘succeed’ in res 的写法来表示 res 中是否存在 succeed 的 key 来代替 res.succeed。在请求或响应被 then 或者 catch 处理前拦截他们,拦截分为请求拦截和响应拦截。使用 axios.create() 使用自定义配置创建一个 axios 实例。

2023-09-05 11:51:30 795

原创 Ant-design-vue AutoComplete 自动补全组件的使用

AutoComplete 是一个输入框自动完成功能,在输入时提个建议或者辅助提示。

2023-08-15 17:03:05 880

原创 Table 汇总 handleTableTotal 方法处理

使用 JavaScript 中的 reduce() 方法,对数组中每个元素执行一个 reduce 函数后,将其结果汇总返回值,比如:数值求和、数值中元素出现的次数、数组去重等等。在 JavaScript 计算过程中,因为计算机底层二进制存储的原因导致结果出现精度问题,而 number-precision 第三库就是解决这个精度问题的。针对汇总数据,统一使用 TableTotal 组件中的样式显示。reduce() 方法还可以将数组转换为对象。针对汇总数据,使用函数返回数组格式。

2023-08-15 15:47:13 111

转载 JavaScript 生成唯一标识

Math.random()方法可以生成一个随机数,因为它返回0到1之间的伪随机数,所以我们可以将其与当前的时间戳相乘,生成一个不太可能重复的唯一ID。通过当前时间戳和生成机器码合一起生成的唯一序列号,可以避免生成的唯一序列号重复的问题。获取时间戳后加上随机截取的字母,采用数字加字母的形式,获取唯一标识。

2023-08-14 17:29:04 738

原创 JavaScript 中 toFixed 如何满足四舍五入

JavaScript 自带的 toFixed 方法有时候会出现计算不准确的问题,往往与我们预期的四舍五入有出入,因此我们考虑重构 toFixed 方法。

2023-08-14 17:11:48 573

原创 Tab 标签页下拉菜单相关操作逻辑处理

右击 Tab 标签页显示下拉菜单项,例如:刷新当前页、关闭当前页、关闭左侧、关闭右侧、关闭其他、关闭所有等操作。

2022-11-18 11:44:53 887 1

原创 Dropdown 下拉菜单实现标签页的相关操作

Dropdown 组件是向下弹窗列表。点击或移入触电,会出现一个下拉菜单,可以在列表中进行选择,并执行相应的命令。

2022-11-18 10:26:55 1248

转载 Vue3 实现背景水印功能

在 web 的世界里,对于图片文档等增加水印处理是十分有必要的。水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加。通过 canvas 创建一张含有水印信息的背景图片,通过 hooks 函数插入到页面中。

2022-11-10 17:51:56 1240

转载 git 创建新分支后上传报错 [rejected] test -> test (non-fast-forward) 解决方法

原因分析是远程库和本地文件存在差异,因为本地 test 是 develop 分支进行修改,所以直接强制推送。

2022-11-01 20:00:53 761

原创 基于 element,阅读 ScrollBar 滚动组件源码

即当 wrap 滚动的时候,thumb 应该向下滚动的距离正好是 transform: translateY(wrap.scrolltop / wrap.clientheight )。thumb 滚动条拖拽处理逻辑:在拖拽 thumb 的过程中,动态的计算 thumb 顶部(左侧)到 track 顶部(左侧)的距离占 track 本身高度(宽度)的百分比,然后利用这个百分比动态改变 wrap.scrolltop 的值,从而触发页面滚动以及滚动条位置的重新计算,实现滚动效果。// 滚动到指定位置。

2022-11-01 19:59:38 698

原创 虚拟滚动(Virtual Scrolling)实现

针对大数据列表一般不会一次性加载,会采用上拉加载或者分页的方式展示。如果 10W 条数据,列表对应着 10W 个 DOM 节点,性能方面体验可能会不太好,因此引入虚拟滚动来优化。虚拟滚动:要渲染完整列表对应的高度是通过 [虚拟计算] 的,并不是文档中存在对应的 DON 节点数。只要 [虚拟列表高度] > [列表可视区高度] 时,就会产生滚动条即可发生滚动操作。在滚动操作时,保证 [实际渲染的列表] 一直存在 [列表可视区] 中,并且动态切换需要渲染的列表数据。

2022-11-01 19:56:58 2391

原创 ant-design-vue 库 Loading 组件封装

ant-design-vue 库中 Spin :用于页面和区块的加载中状态。页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

2022-09-20 18:07:13 3385

原创 Vue 注册组件,抽离 withInstall 方法

在组件中,我们通常需要使用 Vue.component 去注册组件后才能使用。最后,我们引入 withInstall 方法,组件注册方法变得更简洁了。

2022-08-11 11:49:57 2670

转载 npm install 时,出现 cb() never called

npm install 时,解决 cb() never called 问题

2022-07-25 14:28:04 150

转载 运行项目时,出现 Syntax Error: TypeError: token.type.endsWith is not a function 的解决方案

问题描述当为项目代码拉取分支后执行npm install下载依赖包,然后执行npm run serve发现项目运行失败,提示信息为SyntaxError: TypeError: token.type.endsWith is not a function。解决方案将 babel-eslint 版本为10.1.0,把版本降为8.2.2,即重新安装指定版本的依赖。npm install babel-eslint@8.2.2 --save...

2022-03-16 23:35:57 7452 1

转载 git 合并分支时,出现“Please enter a commit message to explain why this merge is necessary”如何退出

git 合并分支时,出现 Please enter a commit message to explain why this merge is necessary 问题解决方案:按i键,进入插入(insert)描述操作,可以选择不输入按Esc键,结束插入描述操作按:wq,表示保存并结束本次操作enter 键即可结束本次错误信息...

2022-03-16 23:31:07 4099

转载 npm install 报错 --ignore-scripts

如果npm install报错,单独安装这个包,加上参数:–ignore-scriptsnpm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! deasync@0.1.21 install: `node ./build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the deasync@0.1.21 install script.npm ERR! This is probably not a

2022-02-24 11:40:30 3746

原创 Node 相关 API

Node 的 path.resolve 方法import { resolve } from 'path'function pathResolve(dir: string) { return resolve(process.cwd(), '.', dir)}安装依赖yarn add @types/node --devresolve 方法path.resolve([…paths])里的每个参数都类似在当前目录执行一个 cd 操作,从左到右执行,返回的是最后的当前目录。path.

2022-02-22 17:36:11 389

原创 理解 Vue 中的 provide 和 inject

父子组件通过 props 和 emits 来通信。即:父元素通过 props 把数据传递给子元素,子元素通过 emits 通知父元素内部的变化,还可以通过 defineExpose API 的方式暴露给父元素方法,让父元素调用。作用:Vue 还提供了 provide 和 inject API 实现祖先元素和后代元素的通信。使用方法:使用 provide 函数向所有子元素提供数据,子元素内部通过 inject 函数注入使用。使用场景:组件设计内部交互的逻辑,对应子组件提供什么数据,对父组件提供什么方法,

2022-01-28 10:40:32 1050

原创 Vue3 setup 函数中的语法糖

setupsetup 函数结束两个参数:props 和 context 一个普通 javascript 对象,暴露了其他可能在 setup 中的值。export default { setup (props, context) { const visible = toRef(props, 'visible') console.log(visible.value) const { attrs, slots, emit, expose } = context }}at

2022-01-27 10:54:55 1973

原创 JavaScript 中空值判断的常用用法

对项目中的有些空值判断进行容错处理,例如三目运算、|、&、if else 等,下面有几个处理空值的方法:!用 ! 做类型判断,通常用来与变量求布尔值,除了 null、undefined、0、NaN 和空字符串为 true 之外,其余都为 false。// 都为 true!null!undefined!''// 都为false!100!'hello'!!!! 用来做类型判断,对第一次 ! 操作后的类型进行取反,可以简化 null、undefined和空字符串的判断逻辑。va

2022-01-26 14:13:51 2302

原创 Vueuse 工具库中常用的 hooks

在 Vue 2.2 中,我们引入了 model 组件选项,允许组件自定义用于 v-model 的 prop 和事件。在 Vue 3 中,双向数据绑定的 API 已经标准化,以减少开发者在使用 v-model 指令时的混淆,并且更加灵活。Vue2 中的 v-model 使用在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件:<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --

2022-01-26 14:08:18 2485

转载 Ant Design Vue 展开行

只展开当前行table 中重要的属性如下:参数说明rowKey表格行 key 的取值,可以是字符串或一个函数expandedRowKeys展开的行,控制属性。expandedRowRender额外的展开行实现案例如下:const columns = function (h) { return [ { title: "姓名", dataIndex: "name", key: "name", width: 100 }, { title: "年

2021-11-09 20:31:50 1037

转载 JSX 实现动态组件

Vue2 实现动态组件// template<component :is="currentTabComponent" />// JSX<component is={this.currentTabComponent} />实际上,上述 JSX 是不生效的。解决方案方法一const tabData = [ { key: 'weightList', name: '司磅', componentName: 'weight' }, { key: 'quality

2021-11-09 19:56:20 903

原创 tableSearch 组件

table-search

2021-08-29 11:32:12 1159

原创 使用 Set 数据结构 或 reduce 求并集、交集

const arr = this.tableData.reduce((prev, next) => { prev.push(next.globalInvId) return prev}, [])const brr = data.reduce((prev, next) => { if (arr.includes(next.globalInvId)) { prev.push(next) return prev } return prev}, [])if

2021-08-25 14:30:19 381

原创 antd-vue table 分页缓存已勾选数据

{ {

2021-08-25 11:13:50 2379

原创 antd-vue table 动态添加必填项

import Schema from 'async-validator'async handleValidate () { const length = this.tableData.length for (let index = 0; index < length; index++) { for await (let form of (this.tableData[index].extraInfo || [])) { if (form.required) {

2021-08-25 11:13:21 3287

原创 element-ui Checkbox 多选框如何指定绑定的值

Checkbox 多选框,在单独使用可以表示两种状态之间的切换。在el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean。// `checked` 为 true 或 false<el-checkbox v-model="checked">备选项</el-checkbox>我们可以看到的是,绑定变量 checked 为 true 或 false。如果我们想将 true 或 false,转换为 1 或 0,或者 Y

2021-08-20 16:40:51 3336

转载 ant-design-vue select 组件 placeholder 被隐藏不显示问题

问题描述:select 组件绑定了 v-model 和 placeholder,当 v-modal 绑定的属性为空时,select 组件的 placeholder 属性不显示。// 初始化 level = '' <a-select v-model="level" placeholder="选择日志级别" allow-clear> <a-select-option value="info">一般</a-select-option> <a-sele..

2021-05-09 10:32:25 3208

转载 Vue 项目中 JSX 语法如何使用 scopedSlots

面试官:Vue如何在 JSX 中使用 scopedSlots ? scopedSlots 和 slot-scope 的区别scopedSlots 和 slot-scope 的区别作用相同:都是作用域插槽 场景不同:slot-scope 是模板语法,scopedSlots 则是编程式语法 使用不同:在 template 中使用 slot-scope,在 render 函数中使用 scopedSlots在 template 中如何使用在 JSX 中如何使用...

2021-03-17 20:06:55 5448

转载 JS number 倒序输出 string

用 JavaScript 写一个函数,输入 int 型,返回整数逆序后的字符串。如:输入整型 1234,返回字符串“4321”。要求必须使用递归函数调用,不能用全局变量,输入函数必须只有一个参数传入,必须返回字符串。输入为一个参数 int 型,输出为字符串。(一)非递归函数:我们将 int 型转化为 string ,再把每个字符分开,接着做反转,最后将每个字符链接起来。const...

2021-02-21 13:58:34 580

echarts legend 排列问题

legend 图例组件可以分组展示。详细说明:https://blog.csdn.net/qq_36437172/article/details/106125254

2020-05-14

echarts 路径图

路径图:用于带有起点和重点信息的线数据的绘制,主要用于地图上的航班,路线的可视化。支持二维的直角坐标系和地理坐标系。详细介绍:https://blog.csdn.net/qq_36437172/article/details/106123884

2020-05-14

echarts 地图类型热力图

根据地理区域数据的可视化,除了在地图上添加散点之外,我们也可以制作地图类型的热力图,详细介绍:https://blog.csdn.net/qq_36437172/article/details/106121650

2020-05-14

echarts 柱状图渐变色背景

该案例设置 echarts 柱状图渐变色,同样也可以应用折线图、圆形图等。效果说明:https://blog.csdn.net/qq_36437172/article/details/106115048

2020-05-14

echarts 地图上如何打点

除了  scatter (散点图) 在地图上标记的方式之外,我们也可以使用 markPoint 图表标注的方式在地图上标记.

2020-05-13

echarts 设置地图外边框、地图背景渐变以及在地图上打点.js

主要配置 echart 中 地图的外边框和地图整体背景颜色渐变以及在对应的地图上做标记等功能。详细效果图:https://blog.csdn.net/qq_36437172/article/details/106099547

2020-05-13

echarts 图表加水平直线或者标准线.js

echarts 图表加水平直线或者标准线。添加标准线上的折线一种颜色,标准线下的折线又是一种颜色来区分标准线以上或者以下的数据。

2020-05-04

axios 常用配置以及请求方法封装

使用 axios 的基本配置(axios.create()、baseURL、拦截器)和 post、get、download、upload 等方法的封装。

2019-10-13

基于 echarts 第三方库制作地图信息

使用 echarts 第三库,开发地图组件信息,掌握 registerMap、geo 组件、visualMap 视觉映射组件等组件的配置信息

2019-10-05

choose_goods.html

CSS 实现勾选商品规格:颜色、版本等参数样式,采用 input 标签 type=radio 实现单选功能。

2019-08-30

基于element-ui 使用 upload 预览图片 (含删除功能)

基于element-ui 使用 upload 预览图片 (含删除功能)参考链接:https://blog.csdn.net/qq_36437172/article/details/100034867

2019-08-23

vue 上传图片进行裁剪(VueCropper)

使用 VueCropper 第三方库,对上传的图片进行移动,缩放,裁剪等功能。

2019-04-18

微信小程序 swiper 组件实现层叠轮播图,同时在轮播图中自定义信息

微信小程序 swiper 组件实现层叠轮播图,同时自定义指示点样式和图片描述信息

2019-03-24

vue 封装的 echarts 组件

vue 封装的 echarts 组件,主要传递四个参数到组件中,title、legend、series、xAxis,分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用,数据被覆盖问题解决办法。

2019-03-05

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除