Vue
elementUI Table 动态表头与插槽渲染实战

本文介绍如何在 elementUI 中实现由后端返回配置的动态表头,并结合 Vue 插槽技术处理不同字段的差异化显示。通过解析后端返回的字段列表,动态生成 el-table-column,并利用 scope.row 和 scope.column.property 在插槽中实现标签、字典值转换等复杂样式渲染,解决高度自定义列表界面的需求。

10.31
热度 543
Vue Element UI el-date-picker 隐藏底部清空按钮的两种方案

本文介绍如何在Vue Element UI中隐藏el-date-picker组件底部的清空按钮。提供两种实现方式:通过全局element-ui.scss文件统一隐藏所有日期选择器的清空按钮,或通过为特定组件添加popper-class属性并结合局部CSS规则实现单个页面的隐藏效果。

10.31
热度 231
JS实现滚动触底加载数据的思路与代码(附PC端滚动分页)

本文详细解析了前端滚动触底加载的实现原理,涵盖可视高度、滚动距离与实际高度的计算逻辑。通过Vue示例展示了从基础判断到添加触发阈值、防重复触发及性能优化的完整代码演进过程,适用于PC端滚动分页加载场景。

10.31
热度 204
Vue Element UI 结合 sortable.js 实现嵌套表格行内拖拽排序

本文介绍在 Vue 项目中利用 Element UI 表格组件与 sortable.js 库,实现多层嵌套表格的行内拖拽排序功能。通过后端返回的 id、next、prev 属性维护数据顺序,结合深拷贝与递归加载逻辑,确保拖拽时不跨主级且能正确更新排序状态。

10.31
热度 135
前端实现Excel文件导出功能的完整代码解析(vue实现excel文件导出)

本文详细解析前端实现Excel文件导出的两种核心方案:一是通过Blob对象与URL.createObjectURL在前端直接生成下载链接;二是利用后端API处理大数据导出,前端接收二进制流并触发下载。文章提供了Vue结合axios的具体代码示例,涵盖从数据请求、文件类型设置到内存释放的完整流程,适用于数据管理、报表系统及可视化应用等场景。

10.31
热度 280
Vue跳转时根据URL锚点(#xxx)实现页面内容定位的方法

本文介绍在Vue项目中,通过监听URL中的锚点(#xxx)实现页面跳转后自动滚动至指定内容区域的方法。针对子组件滚动区域无法自动定位的问题,提供了基于watch监听路由变化并结合setTimeout延迟执行的代码示例,确保DOM更新后平滑滚动到目标元素。

10.31
热度 194
Vue实现带拖动和播放功能的时间轴组件

本文介绍基于Vue开发的timeline-slider-vue组件,支持横向与竖向模式。该组件提供拖动交互、日期标记、锁定日期及自动播放功能,详细列出Props参数、Slot插槽及Change/Input事件用法,并附带Node环境配置与项目构建命令。

10.31
热度 664
el-input 限制输入只允许输入浮点型的解决思路

本文介绍如何在 Vue 和 Element UI 环境下,通过结合 oninput 原生事件与 @input 自定义方法,限制 el-input 仅允许输入浮点数。方案涵盖数字、小数点及正负号的过滤,解决多小数点、中文拼音干扰及格式校验问题,确保输入即时合规。

10.31
热度 512
Vue中onMounted获取不到DOM的原因及解决方案

本文分析Vue中onMounted生命周期获取DOM失败的原因,重点探讨v-if和v-for指令对DOM渲染的影响。对比v-if与v-show在DOM存在性上的差异,并提供nextTick和onUpdated两种解决方案,帮助开发者避免常见坑点。

10.31
热度 340
Vue权限管理几种实现方法

本文介绍了Vue前端权限管理的几种实现方法,涵盖接口、按钮、菜单和路由四个维度。详细对比了动态挂载路由、后端返回菜单等方案的优缺点,并提供了基于路由meta和自定义指令的按钮权限控制示例,帮助开发者根据项目需求选择合适的权限控制策略。

10.31
热度 290
JavaScript与Vue中禁用鼠标右键菜单的实现方法

本文介绍了在JavaScript和Vue项目中禁用鼠标右键菜单的方法。通过oncontextmenu事件和addEventListener监听contextmenu事件,结合preventDefault()阻止默认行为。在Vue中,利用@contextmenu指令实现自定义右键菜单功能,并处理显示、定位及隐藏逻辑。

10.31
热度 602
JavaScript实现给数字添加千位分隔符

本文详细介绍在JavaScript中为数字添加千位分隔符的多种实现方式,包括手动遍历字符串、使用正则表达式、toLocaleString及Intl.NumberFormat方法。同时提供在Vue项目中创建并全局挂载数字格式化过滤器的完整步骤,便于在页面中直接复用。

10.31
热度 597

标签目录

JavaScript 核心技术JavaScript 基础JavaScript 函数与作用域JavaScript 对象与原型JavaScript 数组与数据处理JavaScript 异步编程JavaScript 项目实战
浏览器与 Web 开发DOM 与事件浏览器 API网络请求与通信浏览器数据存储前端调试前端安全
前端框架与应用VueReactNext.jsNuxt前端状态管理前端性能优化
TypeScript 与工程化TypeScript前端构建依赖管理自动化测试前端部署代码规范与重构
Node.js 后端开发Node.js 基础Node.js Web 框架数据库开发接口开发与鉴权服务部署与运维Node.js 性能优化
AI 开发与应用大模型 API 开发AI 智能体开发RAG 与知识库AI 编程工具AI 多模态应用AI 应用部署