bug记录：链式调用
摘要：问题 操作确认弹出框，点击取消后，页面消息提示 xx失败。 正确逻辑是：取消后不会显示此消息提示。 解决 发现是 $modal 链式调用的问题——把本应该写在调用接口中的 then/catch/finally，写在了 $modal 的链式调用中。 如上图所示，右侧是修改后的内容。
阅读全文
posted @ 2025-03-06 17:22
随笔分类 - Vue深度掌握
打包后样式和本地样式不一致
摘要：问题 使用 vxe-table 中的 size 属性，缩小表格行高后，本地样式生效，但是打包后线上样式没有生效。 分析 网上查了很多资料： 有的说是 main.js 中样式层叠错误，解决办法是把样式文件引入放在 App 和 router 引入之前。 有的说是应该把自定义样式放在 scoped 中，并
阅读全文
posted @ 2025-02-14 15:19
刷新后记忆上一次的查询参数、页面位置
摘要：需求 目前页面缓存机制是 keep-alive，即点击之前页签，页面不刷新。这会导致：数据不是最新的，即在页签 A 操作数据后，点击之前打开的页签 B，页签 B 的数据仍然是旧的。 需求：再次点击页签 B 时，根据之前的查询参数（包括页码）、树节点、屏幕高度（下文统称为“查询数据”）刷新页面，即实现
阅读全文
posted @ 2024-02-18 14:58
正则校验：不能输入中文
摘要：需求 表单项校验要求： 满足某条件时，必填； 不能输入中文。 代码 data() { var validateRelateTable = (rule, value, callback) => { if (this.form.type !== 0 && !value) { callback(new E
阅读全文
posted @ 2024-01-31 13:28
若依页面刷新 $tabs.refreshPage()
摘要：前言 若依封装了 $tab 对象，其中有个刷新页签的方法。 看了下 refreshPage() 的源码，发现是用 router.replace() 替换当前位置的。 但是当前路由地址前加了 /redirect前缀，不知这个有什么作用。查看相关源码，发现： 如果不加该前缀，控制台会报错如下： 定义了
阅读全文
posted @ 2024-01-18 14:30
vxe-column 表头顺序：数据中改变后，但视图位置不更新
摘要：问题 在左树右表的页面中，左侧点击不同的节点，右侧表头会改变。但在某些情况下，数据中表头顺序改变了，但视图中表头位置却没变。如下图所示： 尝试 数据变了但视图未更新，猜测是vue更新机制导致的，于是把表头数组的赋值改为 $set，无效； 猜测是右侧表格组件复用导致数据未更新，（但其实 vue-dev
阅读全文
posted @ 2024-01-17 14:37
el-pagination 分页组件自定义每页条数
摘要：需求 el-pagination 中的 sizes 部分是下拉框（如下图所示）。虽然可以通过 page-sizes 属性传递数组实现自定义下拉框选项，但是无法实现手动输入每页条数。 需求是：修改为允许手动输入选项的下拉框，即给 el-select 添加 allow-create 属性。 分析 el-
阅读全文
posted @ 2023-12-27 15:03
若依关闭页签不会销毁 keep-alive 缓存的组件
摘要：问题场景 使用 keep-alive 缓存的组件。离开该页签时，组件状态为 inactive；点击该页签时，组件状态为 active。 点击按钮关闭该页签 this.$tab.closePage(view)，该组件被销毁。 需求：在页面A中删除数据B，则之前点击数据B打开的页签C会被关闭（使用 th
阅读全文
posted @ 2023-12-22 15:52
点击按钮的bug，原因是类名和第三方库类名重复
摘要：问题场景 点击按钮，父盒子会出现阴影。 点击父盒子，页面有点击效果。但实际上父盒子没有绑定点击事件。 模板代码 <div class="btn" v-if="showActions"> <el-row :gutter="10"> <el-col :span="1.5"> <el-button typ
阅读全文
posted @ 2023-11-30 15:05
新版本 el-input 不支持 v-model.trim，自定义指令去除首尾空格
摘要：问题场景 <el-input type="textarea" v-model.trim="value" /> 多行文本输入框无法换行。 经测试，去掉 .trim 修饰符后，就可正常换行了。 从 官网文档 ，发现 element-ui 新版本不支持 v-model 修饰符。 因此，若在新版本的 ele
阅读全文
posted @ 2023-11-17 15:46
async 和 await 如何捕获异常
摘要：前言 之前代码写法中使用 async 和 await，没有捕获异常，导致不满足 code 200 条件时，页面无法抛出错误，如下所示： async 和 await submitForm() { this.$refs["form"].validate(async (valid) => { if (!v
阅读全文
posted @ 2023-11-17 14:49
点击输入框，底部弹出下拉框显示输入建议
摘要：需求 点击输入框时，或者输入内容时，底部弹出下拉框显示输入建议。 选择某项输入建议后，输入框显示该内容。 输入建议列表根据输入的内容模糊搜索返回；若输入内容为空，则返回全部输入建议。 效果类似于搜索引擎的搜索栏： 分析 <input /> 原生属性 autocomplet，若为 on 则下拉框形式展
阅读全文
posted @ 2023-11-15 11:53
表格数据拖拽排序 sortable.js
摘要：需求 拖拽表格的行数据，实现排序。 问题 拖拽后调用接口，但视图没变，还是原来的顺序 场景：拖拽表格行数据后，tableDataArr 中数据的 orderNum 值会改变，实现拖拽换序。 期望情况：页面根据更改后的 orderNum 重新排序。 实际情况：接口数据变了，但是页面行数据没有改变。也就
阅读全文
posted @ 2023-11-14 14:00
sortable 拖拽后数据变更但视图不变
摘要：问题 表格中某两行拖拽换序，使用 sortable.js 在拖拽结束后调用换序接口，再更新数据列表。 问题是数据变了，但视图不变。如下图所示： 分析 vue 无法检测数组中顺序的变化。 即使采用 $set，$forceUpdate()，给组件添加 key 属性，仍然无法解决该问题。 解决办法 请求数
阅读全文
posted @ 2023-10-16 16:03
vue-treeselect 校验失败添加红框
摘要：# 需求 [vue-treeselect 校验及清除校验](https://www.cnblogs.com/shayloyuki/p/17550258.html "vue-treeselect 校验及清除校验") 这篇介绍了用 `@input` 在校验失败时显示校验信息。但还需要同时显示红色边框。如
阅读全文
posted @ 2023-08-16 17:37
vue-treeselect 校验及清除校验
摘要：# 问题 `vue-treeselect` 依照以下方式无法实现校验（未选择字段不会提示选择）： ``` rules: { pid: [ { required: true, message: `请选择上级${this.nodeLabel}`, trigger: "blur", }, ], }, ``
阅读全文
posted @ 2023-08-15 09:45
封装公共方法：树形数组扁平化
摘要：需求 项目多个地方需要操作树形数据，多次用递归比较麻烦，于是就打算封装成公共方法。 解决 第一步：在 /src/utils 路径下新建 arr.js 文件 /** * * @param {Array} arrs 树形数据 * @param {string} childs 树形数据子数据的属性名,常用
阅读全文
posted @ 2022-12-14 17:05
el-select 无法实时显示选中的项、无法清除
摘要：问题 某个 el-select 多选下拉框，显示栏无法实时显示选中的项，也无法清除已选中的项；但是最终提交表单时，能够赋值成功。 解决 Vue 中无法监听数组中项的变化，因此需要用 $set()。 代码： 参考链接 解决element-ui中的el-select选择器无法显示选中内容的问题 vue
阅读全文
posted @ 2022-12-12 14:56
封装若依二级菜单后，主页面路由不显示
摘要：问题 之前封装了一个二级菜单，跳转都正常的。现在由加了一组菜单内容，右侧主页面跳转不成功——[vue-router] Route with name 'EleSpecLib' does not exist。 尝试 首先检查 vue 文件中的 name 大小写是否和路由文件中的 name 完全一致。确
阅读全文
posted @ 2022-10-31 10:51
el-menu 子菜单不高亮显示
摘要：问题 之前做了一个二级菜单是正常显示的，后面又加了一组内容，发现原来的子菜单不会高亮了。 于是开始排查，发现是绑定的 key 设置有误。 分析 绑定 key 属性是为了强制刷新组件，即随着判断条件的变化，切换菜单内容。 如果缺少红框中的 if (this.projectId) 判断条件，则从项目目录
阅读全文
posted @ 2022-10-28 11:34
