Vue.js论坛 今日: 0|主題: 240|排名: 78 

在实际业务开发中，表格数据导出是高频需求。大多数场景下，我们导出的是表格当前展示的数据，但有时业务需要导出特定的数据集（如：筛选后的结果、选中的数据、或后端返回的原始数据）。本文将基于 vxe-table 组件，介绍如何通过 exportData 方法实现指定数据导出，并提供多种实用场景的解决方案。 exportData 方法说明 vx ...

Vue 甘特图组件 vxe-gantt 如何精准定位到行、列与任务视图 在项目管理系统中，甘特图是展示任务时间线的重要工具。当项目数据量庞大时，手动滚动查找特定任务或日期列会非常低效。vxe-gantt 组件提供了 scrollToRow、scrollToColumn 和 scrollToTaskView 等 API，允许我们通过代码控制视图滚动，将目标行、列或任务条精确 ...

前言 Vue3已经正式发布，成为前端开发的主流框架。结合Vite构建工具，开发体验大幅提升。本文从零搭建一个企业级Vue3项目，包含路由、状态管理、API封装、权限控制等核心模块。 一、环境准备 # Node.js >= 16 node -v # 创建项目 npm create vite@latest my-vue3-app -- --template vue cd my-vue3-app npm install npm r ...

🧑‍💻 写在开头 点赞 + 收藏 === 学会🤣🤣🤣 场景 在单页面应用（SPA）项目中，有一个问题非常常见，但又经常被低估：系统明明已经发布了新版本，部分用户却依然停留在旧页面中继续操作。 大多数时候，这种状态并不会立刻出问题，所以团队往往不太在意。但一旦用户继续进行路由跳转、访问懒加载页面，或者触发某些依赖新 ...

基于 vxe-gantt 实现任务条点击编辑表单 在项目管理中，甘特图是展示任务进度的核心组件。本文将介绍如何使用 vxe-gantt 组件实现点击任务条弹出编辑表单的功能，支持对任务的名称、时间、进度、负责人、图片附件等信息进行编辑。 效果 点击甘特图中的任意任务条，系统会弹出模态框，展示当前任务的详细表单，编辑保存后甘 ...

🧑‍💻 写在开头 点赞 + 收藏 === 学会🤣🤣🤣 前端性能优化实战：ECharts地图渲染12万+数据动态动画方案 本文记录了在实际项目中，使用ECharts地图组件渲染12万+设备安装数据的性能优化实战经验，包含完整的技术方案和代码实现。 项目背景 公司需要将全年设备安装量通过旗帜的形式展示在全国地图上，实现数据可视化大屏 ...

大家好，我是 Java陈序员。 对于英语学习，很多人都卡在“背单词”这一关：背了忘、忘了背，明明花了大量时间，效果却微乎其微。 其实问题不在于努力，而在于方法 —— 传统的“看 + 读”属于被动输入，记忆留存率极低。 今天，给大家介绍一款开源英语单词与文章练习工具，通过“打字”完成单词/文章的学习，用主动输入替代 ...

通过 taskViewConfig.viewStyle.cellStyle 可以直接为甘特图日期轴上的每一个单元格设置内联样式，实现灵活的背景色、边框、字体等视觉效果。 配置说明 样式配置位于 taskViewConfig.viewStyle.cellStyle，它是一个函数，接收当前单元格对应的日期对象，返回一个样式对象 taskViewConfig: { viewStyle: { cellStyle({ ...

通过 taskViewConfig.scales 参数，可以灵活配置甘特图日期轴的显示层级。本文将介绍如何将日期轴显示为“月 + 周”模式，以及如何自定义每周的起始日期。 核心配置示例 要显示“月 + 第几周”的双层日期轴，只需在 scales 数组中同时配置 'month' 和 'week' 即可。 <template> <div> <vxe-gantt v-bind="ganttOptio ...

最近，有一个比较火的很有趣且灵动的登录页火了。 角色视觉跟随鼠标 输入框打字时扯脖子瞅 显示密码明文时避开视线 已经有大神（katavii）复刻了动画效果，并在github上开源了：https://github.com/katavii/animated-login ，基于React实现。 如果你的项目是用Vue开发的，可以考虑用AI将此项目转换成了Vue3的语法写法。 ...

大家好，我是 Java陈序员。 对于依赖 Claude 进行代码开发、内容创作的开发者来说，稳定且安全的访问体验，直接决定了工作效率。但官方服务的地区限制、第三方镜像的隐私风险、拼车套餐的成本模糊，成了绕不开的坎。 今天，给大家介绍一款开源的 Claude 中转服务，适用于自建 Claude 镜像！ 关注微信公众号：【Java陈序员 ...

在使用 vxe-form 表单配置渲染时，日期范围选择器（VxeDateRangePicker）支持多种数据格式绑定，包括字符串类型、数组类型以及两个独立字段的方式。本文将详细介绍这三种用法的配置方法。 三种数据绑定方式 通过 itemRender.name='VxeDateRangePicker' 指定渲染控件 字符串格式（逗号分隔） 适用于需要将起止日期以逗号分隔 ...

🧑‍💻 写在开头 点赞 + 收藏 === 学会🤣🤣🤣 ”浏览器屏幕上看的好好的，为什么打印出来就变了？” 这句话几乎每个做过打印需求的前端开发者都说过。字体被替换、字号失控、图标变方框，这些问题看似玄学，背后却有清晰的技术原因。本文将从打印需求中常遇到的三个问题来解释其背后的原理和对应的解决方法。 字体被替换- ...

在开发后台管理系统时，经常会遇到需要展示复杂表格的场景，其中表头合并（多级表头、不规则合并）是一项常见需求。vxe-table 是一款功能强大的 Vue 表格组件，它不仅支持树形分组表头，还提供了自定义列头合并的功能，允许开发者灵活地将任意单元格进行合并，满足各种复杂的表头设计。 形分组表头 vs 自定义合并表头 vxe-t ...

在使用 vxe-table 表格组件时，默认情况下，当用户点击某一行时，该行会高亮显示（即成为当前行），并且无法通过再次点击来取消高亮。这种交互适用于需要始终选中一行的场景。 但在某些业务场景下，可能需要允许用户取消选中当前高亮的行（例如，允许不选中任何行）。vxe-table 提供了灵活的配置来实现这一需求 实现方式 通 ...

vue表格vxe-table如何获取拖拽后的行序号，通过 row-config.drag 和列设置 drag-sort 启用行拖拽排序功能 通过调用 getFullData 方法获取拖拽后的数据，遍历数据得到序号 <template> <div> <vxe-button status="success" @click="resultEvent">获取拖拽后序号</vxe-button> <vxe-grid ref="gridRef" v-bind="gri ...

vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能，支持二次确认 https://gantt.vxeui.com 配置说明 实现该功能主要依赖 taskLinkConfig 对象中的两个属性： isDblclickToRemove 说明：开启/关闭双击删除线的功能。设置为 true 时，用户双击依赖线会触发删除逻辑。 beforeRemoveMethod 说明：删除前的拦截钩子。如 ...

大家好，我是 Java陈序员。 在日常生活中，你是否常常遇到如下场景： “下班到家不想点外卖，却不知道用现有食材做什么” “囤的食材快过期，翻遍 APP 也找不到适配的菜谱” “厨房新手怕翻车，想找只用平底锅/电饭煲就能做的菜” 今天，给大家介绍一款开源菜谱工具，帮助你利用现有食材生成菜谱，解决今天吃什么的“世纪 ...

🧑‍💻 写在开头 点赞 + 收藏 === 学会🤣🤣🤣 这是一个非常好的问题！确实，HTML5 提供了原生的 <video> 标签，理论上可以直接播放视频，但为什么在实际项目中我们常常还会使用 Video.js、Plyr、hls.js 等“视频播放器”库呢？原因如下： 一、原生 <video> 的局限性 1. 浏览器兼容性不一 ...

vue vxe-table 数据分组与排序的实现方式，当需求需要能支持数据分组并对分组后的子项进行排序时，可配合 sortable 来实现 https://vxeui.com <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script setup> import { reactive } from 'vue' const gridOptions = reactive({ ...