当前位置：首页 > article >正文

若依管理系统字典数组forEach改变原数组

article 2025/3/1 16:49:24

若依管理系统字典：

推荐文档：若依的字典值如何使用（超详细图文教程）_若依字典如何使用-CSDN博客

数组forEach改变原数组：

推荐文档：https://blog.csdn.net/weixin_44628533/article/details/102495129

 getBusinessLists() {
      getBusinessList('sys_smsTypeEnum').then((res) => {
        res.rows.forEach((item) => {
          item.dictValue = Number(item.dictValue);
        });
        this.smsTypeList = res.rows;
        console.log(this.smsTypeList, 'this.smsTypeList');
      });
    },

数组的filterAPI

会产生一个符合条件的新数组

this.$nextTick

推荐文档:三个案例掌握this.$nextTick()方法的使用/Vue中的$nextTick()-CSDN博客

我存疑的代码部分：

在 Vue.js 中，this.$nextTick(() => { ... }) 是一个非常有用的工具，它用于在下一个 DOM 更新周期中执行一个回调函数。这意味着当你更新 Vue 实例的数据后，这个回调将会在下一个事件循环 tick 中执行，确保所有的 DOM 渲染和更新都已完成。

this.$nextTick(() => {
  this.dialogForm = res.data;
});

上下文理解:
- this.dialogForm 是一个 Vue 组件中的数据属性，通常用于存储表单的数据。
- res.data 是从某个 API 调用（如 getSmsConfig(id)）返回的响应数据，可能是用户希望在对话框中编辑或查看的内容。
目的和效果:
- 当你获取到新的数据（res.data）并希望将其赋值给 this.dialogForm 时，直接赋值可能会面临一个问题：此时 DOM 可能尚未更新。因此，后续的 DOM 相关操作可能会得不到正确的结果。
- 使用 this.$nextTick() 可以确保在变更 this.dialogForm 之前，Vue 已经完成了所有依赖于当前数据的 DOM 更新。换句话说，你的赋值操作会在上一步 DOM 更新操作之后执行。
实际好处:
- 确保 UI 正确反映数据的变化。例如，如果你在对话框中有某些根据 dialogForm 的值动态生成的内容，使用 nextTick 可以确保这些内容在每次数据更改时都能正确显示。
- 防止潜在的数据显示错误或状态不一致。在某些情况下，特别是当涉及到复杂的组件或第三方库时，确保 DOM 的状态和数据状态一致至关重要。