weixin_41940856的博客

原创 小学生的题：求桌子多高

根据图中的信息，我们可以得到两个方程：h+a−bh+b−a​=11（左图：桌子高度 + 坐猫高度 - 趴猫高度 = 11）=7（右图：桌子高度 + 趴猫高度 - 坐猫高度 = 7）​。设桌子的高度为 h 厘米，坐着的猫高度为 a 厘米，趴着的猫高度为 b 厘米。把这两个方程相加：(h+a−b)+(h+b−a)=11+72h=18h=9。

原创 ant -vue a-table去掉表头

【代码】ant -vue a-table去掉表头。

原创 a-table 加序号

【代码】a-table 加序号。

原创 vben BasicTree悬浮展示子节点名称

【代码】vben BasicTree悬浮展示子节点名称。

原创 vben表单插槽自定义class类

【代码】vben表单插槽自定义class类。

原创 ant-vue 表单一行放两个组件实现

主要依赖ant的space。

原创 基于 Vue3 的智能电梯模拟器实现与优化

智能电梯模拟器是一个基于 Vue3 框架开发的 Web 应用，用于模拟电梯的运行逻辑和用户交互。通过这个模拟器，用户可以直观地了解电梯的调度算法、状态变化以及用户体验优化方案。本项目不仅实现了基本的电梯控制功能，还通过精心设计的 UI 界面和流畅的动画效果，提供了接近真实电梯系统的操作体验。本项目基于 Vue3 框架实现了一个功能完善、体验良好的智能电梯模拟器。通过 LOOK 调度算法实现了电梯的智能调度，通过精心设计的 UI 界面和动画效果提升了用户体验。

原创 Vue 3 + Ant Design Vue 打造高度通用的动态可编辑表格

通过这种配置化的方式，我们将一个特定的业务组件提升为了一个通用的 UI 框架。现在，无论你的业务是管理 “资质”、“技能” 还是 “联系人”，都可以复用同一个组件，只需编写相应的配置即可。这极大地提高了开发效率，减少了重复代码，并使得维护变得更加容易。这个通用组件还可以进一步扩展，例如支持更多的表单组件类型（如checkboxradiotextarea等）、更复杂的联动逻辑或更自定义的单元格渲染。

原创 Vue3 中 ECharts Tooltip 无法显示？问题根源与解决方案

Vue3 中 ECharts Tooltip 无法显示的核心问题是使用ref深度代理 ECharts 实例，导致其内部事件机制失效。通过将ref替换为shallowRef，既能保持实例的响应式引用，又不会破坏其内部结构，是最简单高效的解决方案。在 Vue3 中集成第三方库时，需注意响应式 API 的选择：复杂实例用shallowRef，普通数据对象用refreactive，避免因响应式代理引发的隐性问题。

原创 vue实现浏览器通知

【代码】vue实现浏览器通知。

原创 vben里使用其他图标

本文档提供了vben组件中图标使用的参考资料链接。主要包括:1)Jeecg官方图标使用指南;2)Icones图标库网站;3)Iconify图标设计平台。用户可通过这些链接获取图标名称,直接在项目中复制使用。文档简洁明了地列出了三个实用的图标资源网站,方便开发者快速查找和使用图标组件。

原创 vben表格多选禁用

【代码】vben表格多选禁用。

原创 解决pnpm build打包报错

摘要：该报错提示在配置文件中存在异步生成器函数转换问题，原因是当前环境不支持转换到目标版本（es2015）。解决方案是在vite.config.ts文件中添加配置：重新定义应用配置，设置构建目标为es2020，并添加生产环境下的console和debugger清理功能。通过调整构建目标和覆盖默认配置来解决异步生成器函数的兼容性问题。

原创 vue3 + echarts 实现多折线图

摘要：本文实现了一个基于ECharts的双线图表组件，支持动态数据更新和响应式布局。组件通过props接收数据(data)和配置项(option)，使用watch监听数据变化自动更新图表，并添加窗口大小改变事件监听实现自适应调整。组件采用Typescript开发，包含完整的生命周期管理，在销毁时释放图表资源。图表配置包含提示框、图例、XY轴样式和两条不同颜色的折线，可通过参数控制图表高度，默认200px。该组件可复用性强，通过简单引入即可在页面中展示趋势对比数据，支持自定义高度和标题等配置。

原创 vue3 + echarts 实现横向柱形图

这是一个基于Vue 3和ECharts实现的水平条形图组件。组件具有以下特点：1）支持自定义高度、柱形颜色和X轴分割线颜色；2）包含悬浮提示框功能，显示数据名称和值；3）响应式布局，自动适应窗口大小变化；4）右侧显示数据标签；5）采用双series实现条形和标签分离。组件通过props接收数据源，数据格式为包含name和value的对象数组。使用时只需传入data和height等参数即可快速生成美观的水平条形图。组件还实现了数据变化监听和资源释放功能。

原创 vben表格 多选 支持分页勾选

【代码】vben表格 多选 支持分页勾选。

原创 vben弹窗中 ant DatePicker滚动页面脱离

【代码】vben弹窗中 ant DatePicker滚动页面脱离。

原创 Vben ApiSelect前端模糊搜索

【代码】Vben ApiSelect前端模糊搜索。

原创 vben中Input框showCount不显示字数问题

一定要注意maxlength中l一定要小写。

原创 不同详情页跳转回主页面，控制tab

【代码】不同详情页跳转回主页面，控制tab。

原创 vben框架点击详情页左侧菜单会折叠解决

title: '年度上报',

原创 taro小程序更新提醒

在app.ts文件里onLaunch（）方法中添加如下方法：

原创 css不同尺寸图片不缩放

<divv-for="(item, index) in list":key="index"class="img"> <img :src="item" alt="" /></div>//css .img { width: 500px; height: 500px; img { width: auto; height: auto; max-width: 100%.

原创 ant-vue 在原有table基础上动态添加列

result = data.map((item, index) => ({ title: item[0], dataIndex: item[0], align: "center", customRender: (text, record, index) => record.list[item[0]], }));

原创 vue预览图片

<div v-for="(item4, index4) in item2.imageUrls" :key="index4"> <a-row type="flex" justify="space-between"> <a-col :span="3" class="contentImg"> <img :src="item4" @click="handlePreview(it.

原创 v-for遍历时在遍历后的数据后面加上符号处理

<span v-for="(item1, index1) in list" :key="index1"> <span >{{item}}</span> <span v-if="index1 != list.length - 1" :key="`${index1}_1`" >、</span >..

原创 同级组件传值或者一个组件根据另个组件值变化刷新页面

vueBus1、实例化一个vueBusimport Vue from 'vue'const bus = new Vue()export default bus 2、在需要传值页面使用import vueBus from '@/utils/vuebus' vueBus.$emit('key',vue)3、接受值改变的页面import vueBus from "@/utils/vuebus";mounted() {vueBus.$on("key", function

原创 ant-vue a-tree-select相关

1、递归遍历后端数据满足组件要求 handleTreeData = (treeData) => { let treeData: any = []; treeData.map((item) => { let treeObj: any = {}; treeObj.title = item.orgName; treeObj.value = item.orgId; treeObj.key = item.orgId; it

原创 ant-design-vue 点击弹窗外的区域不关闭弹窗

1、官方组件自带点击弹窗区域外关闭弹窗2、点击弹窗区域外关闭弹窗不关闭属性为：:maskClosable="false"例如 <a-modal :title="title" :width="500" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading" :destroyOnClose="true" @cancel="handleCance

原创 ant-design-vue 中v-decorator设置默认值

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言 一、pdfh5是什么？ 二、使用步骤 1.安装库 2.引入库 总结前言在vue3+ts项目的移动端使用pdf预览提示：以下是本篇文章正文内容，下面案例可供参考一、pdfh5是什么？官方源码：https://github.com/gjTool/pdfh5二、使用步骤1.安装库yarn add pdfh52.引入库import Pdfh5 from.

原创 前端四种undefined

1、已声明，未赋值例如：let a;console.log(a)2、访问某个对象不存在的属性let obj={}console.log(obj.a)3、函数调用少了参数function fn(a,b){console.log(a,b)}fn(c)4、函数的默认返回值function e(){console.log('0000')}console.log(e())...

原创 JSON.parse()与JSON.stringify()的区别

JSON.parse()【从一个字符串中解析出json对象】例子：//定义一个字符串var data='{"name":"good"}'//解析对象let a = JSON.parse(data)console.log(a)结果是：{name: 'good'}JSON.stringify()【从一个对象中解析出字符串】var data={name:'good'}let b=JSON.stringify(data)console.log(b)结果是： {"name":"g

原创 移动端vue3中使用pdf预览

Pdfh5源码地址https://github.com/gjTool/pdfh5使用步骤1、安装yarn add pdfh52、在需要使用的页面引入 <template> <div id="pdf-view"> <div id="pdf"></div> </div></template>import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.cs

原创 ant-design-vue列表第一列索引

原创 ant-design-pro 如何高效地使用Mock数据进行开发 唐金州 报错处理

报错：Proxy error: Could not proxy request /api/dashboard/chart?ID=12345 from localhost:8080 to http://localhost:3000/.修改为：

原创 2020总结及2021计划

2021的第一天，那就祝大家万事胜意吧最近一段时间看到好多人都在写去年的总结与今年的计划，大学读书的时候我也有这习惯，但是立的flag好像还没实现，比如说找个媳妇，哈哈，说来惭愧，一朝被蛇咬！先来去年的总结吧：1、顺利硕士毕业，最感谢自己的父母与这么年来陪我度过学生生涯的老师，感恩！2、勉强签了一份互联网的工作吧，刚过了试用期，慢慢适应吧，加油，送给自己吧！3、从后端到前端，打开新世界吧！4、好像也没啥了2020计划：1、努力工作，熟练掌握vue与react及ts吧2、找个媳妇3、少吃，

原创 内网工具

内网穿透工具natapp:5 C 6 9 1 7 B C

原创 解决antdesigntable表格fixed后出现空白列

解决方案：将所有列的宽度加起来等于:scroll="{x:m}"里m的值,然后其中一列不设置宽度去自适应宽度

原创 解決vue项目出现 Cannot find module ‘babel-eslint‘问题

全局安装npm install eslint babel-eslint -g即可

原创 Bootstrap中样式引入失败问题

重新安装一下bootstrap，见官网https://getbootstrap.com/