- 博客(7)
- 收藏
- 关注
RSS订阅原创 前端实现5种文件简单预览：txt/docx/pdf/xlsx/pptx
文章摘要：本文介绍了在Vue2项目中实现多种文件类型预览的方法。针对txt文件直接获取文本内容展示；使用docx-preview库渲染docx文件；通过pdf.js实现PDF预览；借助js-xlsx解析xlsx文件并转为HTML；利用pptxjs展示pptx文件。重点解决了各类型文件的引入配置、二进制数据处理及渲染容器设置问题，同时提供了样式优化建议。每种方案都包含完整的代码示例，包括异步获取文件、数据转换和渲染流程，为开发者实现多格式文件预览功能提供了完整参考方案。
2025-11-28 13:52:00
392
原创 el-table树形结构实现隔组变色
本文介绍了一种实现树形表格斑马线样式的方法。通过为父子孙同组设置相同背景色，并隔组交替显示不同颜色。具体实现步骤：1）获取组唯一标识（如name属性）并存储顶层顺序；2）在表格中添加row-class-name属性；3）根据分组下标判断奇偶性，返回对应CSS类名。该方法确保同组背景统一，实现隔组变色效果，适用于el-table等树形表格组件。
2025-09-29 09:48:09
257
原创 若依tab栏实现鼠标拖拽
摘要：本文介绍如何在Vue2的若依框架中实现顶部标签页的拖拽排序功能。通过引入SortableJS库，在TagsView组件外层包裹拖拽容器，监听拖拽结束事件获取新旧索引位置，操作数组元素后更新Vuex中的visitedViews状态。关键步骤包括：1）安装SortableJS；2）在mounted钩子初始化拖拽实例；3）实现onEnd回调处理数组元素位置变更；4）通过Vuex mutation更新视图状态。该方法实现了标签页的平滑拖拽排序效果。
2025-09-26 09:00:00
503
原创 解决el-cascader级联选择器空值校验问题
本文分析了Element UI级联选择器（el-cascader）空值校验失效的问题。当v-model初始值为空数组[]时，内置校验规则无法触发必填校验，因为默认仅检测null、undefined和空字符串。解决方案是自定义校验规则，通过validator函数完整校验：是否存在值、是否为数组、数组长度及元素是否全为空。文章提供了具体实现代码，确保能正确捕获所有空值情况并提示用户选择。
2025-09-13 14:01:54
310
原创 前端el-table百分比%排序问题解决
摘要：前端使用Element UI表格进行百分比排序时出现错乱问题。通过自定义sort-method无效后，改用sortable="custom"并监听@sort-change事件，完全自定义排序逻辑：在handleSortChange方法中解析数值并处理0值情况，实现正确的升降序排列。该方法避免了组件内置排序机制的局限性，适用于含百分号等特殊格式的数据排序。
2025-09-06 13:03:50
187
原创 el-table默认搜索加上排序
ElementUI表格默认排序实现方法：在el-table组件中使用default-sort属性设置初始排序列(prop)和排序顺序(order)，如示例中设置金额降序排列。同时需要在queryParams中定义默认排序字段和顺序，并通过sort-change事件处理排序变化，更新参数后重新获取数据。这种方法实现了表格初始加载时的默认排序功能，并支持后续用户交互排序。
2025-08-30 16:14:00
287
原创 treeselect远程搜索获取数据问题的解决
摘要：实现Treeselect远程搜索的两种方案：1)异步模式使用:async="true"和:load-options，但存在LOAD_ROOT_OPTIONS触发问题；2)通过@search-change事件配合禁用本地过滤（:filterable="false"），在搜索时手动设置localSearch.active=false并调用接口获取数据。第二种方法更可靠地实现了点击展开获取全部数据、输入时远程搜索的功能。
2025-08-22 13:13:48
357
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人