shayloyuki

页面交互逻辑比较

摘要：写这篇是为了记录下：能达到相同效果的两种不同的页面交互逻辑。场景侧边栏菜单分为两部分，一部分是固定，一部分是动态。如下图所示：不同的项目，动态菜单的数量和内容不一样。处于项目 A 时，若处于动态菜单页面（比如 Piping），点击顶部下拉框切换到项目 B），那么：之前打开的项目 A 的 Pi 阅读全文

posted @ 2024-01-17 16:42 shayloyuki 阅读(129) 评论(0) 推荐(0)

vxe-column 表头顺序：数据中改变后，但视图位置不更新

摘要：问题在左树右表的页面中，左侧点击不同的节点，右侧表头会改变。但在某些情况下，数据中表头顺序改变了，但视图中表头位置却没变。如下图所示：尝试数据变了但视图未更新，猜测是vue更新机制导致的，于是把表头数组的赋值改为 $set，无效；猜测是右侧表格组件复用导致数据未更新，（但其实 vue-dev 阅读全文

posted @ 2024-01-17 14:37 shayloyuki 阅读(992) 评论(0) 推荐(0)

多个异步请求的执行顺序

摘要： Fn() { // 以下两个都为异步请求 this.getData1() this.getData2() } this.Fn() 我以为的执行顺序是：getData1 --> getData2 但其实，顺序不一定，getData1 有时在前，有时在后。解决：加上 async 和 await asy 阅读全文

posted @ 2024-01-17 13:31 shayloyuki 阅读(82) 评论(0) 推荐(0)

el-table 某些行不可勾选

摘要：官网文档 selectable 属性代码 <el-table-column align="center" type="selection" width="55" :selectable="checkSelectable" /> checkSelectable(row) { return !row. 阅读全文

posted @ 2024-01-12 11:10 shayloyuki 阅读(773) 评论(0) 推荐(0)

el-pagination 分页组件自定义每页条数

摘要：需求 el-pagination 中的 sizes 部分是下拉框（如下图所示）。虽然可以通过 page-sizes 属性传递数组实现自定义下拉框选项，但是无法实现手动输入每页条数。需求是：修改为允许手动输入选项的下拉框，即给 el-select 添加 allow-create 属性。分析 el- 阅读全文

posted @ 2023-12-27 15:03 shayloyuki 阅读(3102) 评论(3) 推荐(0)

若依关闭页签不会销毁 keep-alive 缓存的组件

摘要：问题场景使用 keep-alive 缓存的组件。离开该页签时，组件状态为 inactive；点击该页签时，组件状态为 active。点击按钮关闭该页签 this.$tab.closePage(view)，该组件被销毁。需求：在页面A中删除数据B，则之前点击数据B打开的页签C会被关闭（使用 th 阅读全文

posted @ 2023-12-22 15:52 shayloyuki 阅读(1690) 评论(0) 推荐(0)

el-date-picker 限制时间范围 picker-options 传参

摘要：需求 el-date-picker 限制时间范围的选取，不能超过某个区间 [startDate, endDate]。问题在于，disabledDate 函数的参数默认是 time，无法传递自定义参数 [startDate, endDate]。分析传递给 picker-options 的值只能是阅读全文

posted @ 2023-12-13 17:29 shayloyuki 阅读(4597) 评论(0) 推荐(0)

blob 下载文件type是否必须设置

摘要：又遇到了一件鬼打墙的事，欲哭无泪。 1 几天前，有个bug：blob文件下载，如果下载非txt文件，比如图片、xlsx，下载后的文件无法正确显示。 // 下载文件 async download(row, prop) { const res = await resourceDownload(row[p 阅读全文

posted @ 2023-12-12 14:06 shayloyuki 阅读(1217) 评论(0) 推荐(0)

隐藏组件，但保留 ref

摘要：需求背景已知：二次封装 el-upload 为 Import 导入组件，点击 A 或 B，都弹出文件选择框。显示如下图所示：父组件：模板代码 <el-col :span="1.5" class="import-btn"> <import ref="importRef" :file-label 阅读全文

posted @ 2023-12-07 17:25 shayloyuki 阅读(57) 评论(0) 推荐(0)

v-loading 对滚动轴部分遮盖不全

摘要：问题场景给有滚动轴的盒子添加了 v-loading 遮罩层，但发现：当盒子内容滚动到底部，刷新页面时，遮罩层无法覆盖盒子底部的区域。如下图所示：模板代码 <div class="content" v-loading="defLoading"> <el-form class="form"> <!- 阅读全文

posted @ 2023-11-30 16:59 shayloyuki 阅读(1265) 评论(0) 推荐(0)