vue单页模式下， 多个页面import同一js,数据被覆盖

最新推荐文章于 2023-10-20 15:31:05 发布
最新推荐文章于 2023-10-20 15:31:05 发布
阅读量1.4k 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thaibo/article/details/104567069
版权

option.js

const baseOption = {
    labelPosition: "top",
    enter: false,
    submitBtn: false,
    emptyBtn: false,
    menuBtn: true,
    column: [
      {
        label: "报告人",
        prop: "person",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入您的姓名",
            trigger: "blur"
          }
        ]
      },
      {
        label: "联系方式",
        prop: "phone",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入您的联系方式",
            trigger: "blur"
          }
        ]
      },
      {
        label: "工作单位",
        prop: "organ",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入您的工作单位",
            trigger: "blur"
          }
        ]
      },
      {
        label: "事件发生时的当地时间",
        prop: "occurTime",
        readonly: true,
        type: "datetime",
        span: 8,
        rules: [
          {
            message: "请输入发生时间",
            trigger: "blur"
          }
        ]
      },
      {
        label: "事件发生的地点",
        prop: "occurLocation",
        readonly: true,
        span: 16,
        rules: [
          {
            message: "请输入发生地点",
            trigger: "blur"
          }
        ]
      },
      {
        label: "所属作业流程",
        prop: "operatingProcedure",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入作业程序",
            trigger: "blur"
          }
        ]
      },
      {
        label: "事件发生时的岗位",
        prop: "job",
        disabled: true,
        readonly: true,
        type: "select",
        span: 8,
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=cas_job",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
        rules: [
          {
            message: "请输入所在岗位",
            trigger: "blur"
          }
        ]
      },
      {
        label: "岗位描述",
        prop: "jobDesc",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入您的岗位描述",
            trigger: "blur"
          }
        ]
      },
      {
        label: "航班号",
        prop: "flight",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入航班号",
            trigger: "blur"
          }
        ]
      },
      {
        label: "机型",
        prop: "airplane",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入机型",
            trigger: "blur"
          }
        ]
      },
      {
        label: "航班其他信息",
        prop: "flightInfo",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入航班其他信息",
            trigger: "blur"
          }
        ]
      },
      {
        label: "事件经过",
        prop: "eventDesc",
        component: "rich-viewer",
        span: 24
      }]
  };

const group1 = [
  {
    label: "反馈要求",
    icon: "el-icon-info",
    column: [
      {
        label: "责任单位",
        prop: "responDept",
        type: "tree",
        span: 8,
        dicData:[],
        props: {
          label: "title"
        },
        rules: [
          {
            required: true,
            message: "请输入责任单位",
            trigger: "blur"
          }
        ]
      },
      {
        label: "反馈时限",
        prop: "responTime",
        type: "date",
        span: 8,
        rules: [
          {
            required: true,
            message: "请输入反馈时限",
            trigger: "blur"
          }
        ]
      },
      {
        label: "反馈要求",
        prop: "responClaims",
        type: "textarea",
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入反馈要求",
            trigger: "blur"
          }
        ]
      }
    ]
  }
];

const group2 = [
  {
    label: "反馈信息",
    icon: "el-icon-info",
    column: [
      {
        label: "调查情况",
        prop: "dcqk",
        type: "textarea",
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入调查情况",
            trigger: "blur"
          }
        ]
      },
      {
        label: "相关措施",
        prop: "xgcs",
        type: "textarea",
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入相关措施",
            trigger: "blur"
          }
        ]
      },
      {
        label: "主管领导评审意见",
        prop: "ldyj",
        type: "textarea",
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入主管领导评审意见",
            trigger: "blur"
          }
        ]
      }
    ]
  }
];

export function getFormOption(taskDef){
  let group;
  switch(taskDef){
    case 'accept':
      group = [...group1];
      break;
    case 'handle':
      group = [...group1];
      group[0].column[0].disabled = true;
      group[0].column.map((element, idx) => {
        element.option= {readonly:true}
        element.readonly = true;
      });
      group = group.concat(group2);
      group[1].column[2].readonly = true;
      break;
    case 'dept-audit':
      group = [...group1];
      group[0].column[0].disabled = true;
      group[0].column.map((element, idx) => {
        element.option= {readonly:true}
        element.readonly = true;
      });
      group = group.concat(group2);
      
      group[1].column[0].readonly = true;     
      group[1].column[1].readonly = true;     
      break;
    default:
      group = [...group1, ...group2];
      group[0].column[0].disabled = true;
      group[0].column.map((element, idx) => {
        element.option= {readonly:true}
        element.readonly = true;
      });
      group[1].column.map((element, idx) => {
        element.option= {readonly:true}
        element.readonly = true;
      });
      break;
  }
  group.map((g, i)=>{
    g.column.map((element, idx) => {
      if(element.readonly){
        element.rules=null;
      }
    });
  })
  return Object.assign({group:group}, baseOption);
}

多个vue页面中引用：

import { getFormOption, getTaskOption } from "./option";

在页面之间切换，结果导致baseOption 中的数据被覆盖。解决方案是，将js中定义的变量放到方法内部。

export function getFormOption(taskDef){
  const baseOption = {
    labelPosition: "top",
    enter: false,
    submitBtn: false,
    emptyBtn: false,
    menuBtn: true,
    column: [
      {
        label: "报告人",
        prop: "person",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入您的姓名",
            trigger: "blur"
          }
        ]
      },
      {
        label: "联系方式",
        prop: "phone",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入您的联系方式",
            trigger: "blur"
          }
        ]
      },
      {
        label: "工作单位",
        prop: "organ",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入您的工作单位",
            trigger: "blur"
          }
        ]
      },
      {
        label: "事件发生时的当地时间",
        prop: "occurTime",
        readonly: true,
        type: "datetime",
        span: 8,
        rules: [
          {
            message: "请输入发生时间",
            trigger: "blur"
          }
        ]
      },
      {
        label: "事件发生的地点",
        prop: "occurLocation",
        readonly: true,
        span: 16,
        rules: [
          {
            message: "请输入发生地点",
            trigger: "blur"
          }
        ]
      },
      {
        label: "所属作业流程",
        prop: "operatingProcedure",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入作业程序",
            trigger: "blur"
          }
        ]
      },
      {
        label: "事件发生时的岗位",
        prop: "job",
        disabled: true,
        readonly: true,
        type: "select",
        span: 8,
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=cas_job",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
        rules: [
          {
            message: "请输入所在岗位",
            trigger: "blur"
          }
        ]
      },
      {
        label: "岗位描述",
        prop: "jobDesc",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入您的岗位描述",
            trigger: "blur"
          }
        ]
      },
      {
        label: "航班号",
        prop: "flight",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入航班号",
            trigger: "blur"
          }
        ]
      },
      {
        label: "机型",
        prop: "airplane",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入机型",
            trigger: "blur"
          }
        ]
      },
      {
        label: "航班其他信息",
        prop: "flightInfo",
        readonly: true,
        span: 8,
        rules: [
          {
            message: "请输入航班其他信息",
            trigger: "blur"
          }
        ]
      },
      {
        label: "事件经过",
        prop: "eventDesc",
        component: "rich-viewer",
        span: 24
      }]
  };

const group1 = [
  {
    label: "反馈要求",
    icon: "el-icon-info",
    column: [
      {
        label: "责任单位",
        prop: "responDept",
        type: "tree",
        span: 8,
        dicData:[],
        props: {
          label: "title"
        },
        rules: [
          {
            required: true,
            message: "请输入责任单位",
            trigger: "blur"
          }
        ]
      },
      {
        label: "反馈时限",
        prop: "responTime",
        type: "date",
        span: 8,
        rules: [
          {
            required: true,
            message: "请输入反馈时限",
            trigger: "blur"
          }
        ]
      },
      {
        label: "反馈要求",
        prop: "responClaims",
        type: "textarea",
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入反馈要求",
            trigger: "blur"
          }
        ]
      }
    ]
  }
];

const group2 = [
  {
    label: "反馈信息",
    icon: "el-icon-info",
    column: [
      {
        label: "调查情况",
        prop: "dcqk",
        type: "textarea",
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入调查情况",
            trigger: "blur"
          }
        ]
      },
      {
        label: "相关措施",
        prop: "xgcs",
        type: "textarea",
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入相关措施",
            trigger: "blur"
          }
        ]
      },
      {
        label: "主管领导评审意见",
        prop: "ldyj",
        type: "textarea",
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入主管领导评审意见",
            trigger: "blur"
          }
        ]
      }
    ]
  }
];

  let group;
  switch(taskDef){
    case 'accept':
      group = [...group1];
      break;
    case 'handle':
      group = [...group1];
      group[0].column[0].disabled = true;
      group[0].column.map((element, idx) => {
        element.option= {readonly:true}
        element.readonly = true;
      });
      group = group.concat(group2);
      group[1].column[2].readonly = true;
      break;
    case 'dept-audit':
      group = [...group1];
      group[0].column[0].disabled = true;
      group[0].column.map((element, idx) => {
        element.option= {readonly:true}
        element.readonly = true;
      });
      group = group.concat(group2);
      
      group[1].column[0].readonly = true;     
      group[1].column[1].readonly = true;     
      break;
    default:
      group = [...group1, ...group2];
      group[0].column[0].disabled = true;
      group[0].column.map((element, idx) => {
        element.option= {readonly:true}
        element.readonly = true;
      });
      group[1].column.map((element, idx) => {
        element.option= {readonly:true}
        element.readonly = true;
      });
      break;
  }
  group.map((g, i)=>{
    g.column.map((element, idx) => {
      if(element.readonly){
        element.rules=null;
      }
    });
  })
  return Object.assign({group:group}, baseOption);
}
thaibo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目优化之按需引入组件和事件及时销毁
jieweiwujie的博客
12-30 722
vue项目优化之按需引入组件和事件及时销
Vue-Journal-App:我使用Vue Router练习的一个小项目的代码
03-13
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue Router是Vue生态中的官方路由库，它使得在单页面应用程序（SPA）中管理导航和页面路由变得简单。在这个名为"Vue-Journal-App"的项目中，我们看到作者...
javaScript 设计模式
baidu_36872367的博客
01-04 176
[参考资料] (https://github.com/ni742015/design-patterns) （https://www.jianshu.com/p/4e1212907726） （https://blog.csdn.net/weixin_33754913/article/details/91477971） 什么是设计模式 其实简单可以理解为，设计模式其实是一套理论，它可以提高代码的可重用...
Vue中 js ts 文件被多个vue组件多次 import 后，文件中的对象是同一个对象还是多个对象
rendawei636专注医疗软件
05-09 2068
webpack会对每个文件定义一个id，这个id是唯一的。在import的时候，会先查找一遍文件对应的id，如果未加载，将进行加载。在加载时，就会执行内部的函数。所以，可知，如果导出的是实例化函数对象，那么，这个对象将是同一个对象，如果是函数对象，外部组件也可以实例化当前作用域的对象。 QualityControlParamManager.ts文件 ------------------------------------------- class QualityControlParamManager{
vue的v-for中循环修改变量（this.xxx）的给子组件传值覆盖重复的问题
最新发布
HD243608836的博客
10-20 922
vue的v-for是最后统一调用给子组件传值，而不是每次执行就调用传值一次！所以变量会在被传值到子组件之前，会被一直修改 list.length 次。而底层逻辑应该是就是“浅拷贝”变量，即引用地址都是指向那同一个地址。使用v-for，其中需要根据不同的item修改某个变量(this.xxx)，然后向子组件中传值，但是发现传到子组件中的。我们循环qsList，其中是我自定义的一个组件，想向该子组件中传值。每次都是新的局部变量。
vue 多个页面共用 js 方法处理 跳转路由实现之mixins
qq_45950523的博客
08-07 1264
直接上图 首先js 配置
Vue 组件传值过程中丢失数据
Chieffo 的博客
03-15 1177
在上一篇文章 JavaScript 中的两种数据类型中，分别介绍了基本类型和引用类型，以及引用类型的浅拷贝与深拷贝。这里需要注意的是，该文章中深拷贝引用类型值的方法，并不是完美的，引用类型值中的某些属性值，仍不能完整地复制到新的变量中。比如函数值，在深拷贝过程中，就会丢失。 问题 在实际项目中，假如使用了二次封装的组件，并且封装的组件内部做了一些属性值的深拷贝操作，就有极有可能因为传入的属性值是引用类型的值，导致丢失部分数据。 举例 以基于 el-table 封装的 ak-table 组件为例： 往 ak-
vuerouter是Vuejs的官方路由器
08-12
别名则允许为同一目标路由设置多个路径，使用 `alias` 选项。 4. **导航守卫**：导航守卫是 Vue-router 的强大特性，它允许在导航发生前、后或过程中执行逻辑，控制导航是否生效。比如，可以检查用户登录状态，或者...
Vue_router:Vue路由完成多项功能
04-29
Vue Router 是 Vue.js 应用程序中的官方路由库，它允许我们通过URL来管理应用的视图，并实现页面之间的平滑导航。Vue Router 和 JavaScript 结合使用，可以构建出功能强大的单页应用程序（SPA）。在本篇文章中，我们...
vue-router
05-06
Vue Router使得在单页应用（SPA）中管理不同视图变得简单，允许我们定义、导航和组织多个组件或视图。下面将详细讲解Vue Router的基础知识，以及如何实现一级路由和二级路由。 1. **Vue Router安装与配置** 在项目...
vue-router异步加载
06-23
命名视图允许我们在同一层级显示多个组件，而嵌套路由则可以将一个路由嵌套在另一个路由下，形成树状结构的路由系统。 Vue.js 和 Vue Router 的结合使用，让开发者能够轻松构建出结构清晰、可维护性高的单页应用。...
覆盖node_modules 中插件的逻辑
zw19940808的博客
06-27 332
当我们下载的插件有bug或者不能满足我们订制化需求的时候，你们是怎么解决的呢？
vue transition标签，新页面被覆盖问题
风吹过的博客
11-20 957
使用transition标签来实现路由改变时的动画效果时，如果我们采用 mode=“in-out” 或者 mode="out-in"的模式，原页面会覆盖新的页面，导致进入动画无法显示。而不写mode，不会产生此问题，不知为什么。 ...
子组件引入的js文件的两个问题
longtengg1的博客
10-19 446
子组件中通过import引入的js文件，会在创建子组件的vue实例前就会被执行，所以会先于父组件中的钩子先执行。 另： 在两个组件中都引入了同一个js文件，此js文件中都做了打印；那么最终只会打印一次。 ...
vue新增和修改使用同一页面
qq_41230572的博客
03-24 7949
路由设置 在route文件夹下index.js文件设置 教师新增和修改公用同一个页面 export const constantRouterMap = [ { path: '/teacher', component: Layout, redirect: '/teacher/list', name: '讲师管理', meta: { title: '讲师管理', icon: 'example' }, children: [ { pat
【Vue】同一个页面多次复用同一个组件数据相互干扰问题
qq_45677671的博客
10-13 3678
同一个页面多次复用同一个组件数据相互干扰问题
vue 同一页面多次引用同一组件
热门推荐
ting0712的博客
11-03 1万+
vue elementui同一页面多次引用同一组件(导致 组件只显示一个,且数据覆盖) 1:需求是在同一页面有两个表格都带有分页功能,于是选择了将分页抽取成组件,一个页面调了两次组件; 2:需要往子组件里传不同的接口路径,在子组件里去写方法请求,将返回结果传给父组件,父组件拿到结果赋给表格data值,显示列表数据; 3:解决问题的关键: //1.-----页面调用子组件,实例化两个 //第一处调用子组件 <pagination @get-list="getpagequery" :...
关于vue一个页面中复用同一个echarts组件的问题
m0_61890246的博客
10-26 3447
关于vue一个页面中复用同一个echarts组件的问题
Vue中import 引入样式文件污染问题，手动测试过几乎所有情况
weixin_54495706的博客
04-21 1104
只有当lang='css'的时候，这两种引入方式都会污染，必须通过标签内引入才可以当lang='scss'的时候（less我没测，我估计跟scss同理，我实际项目都是用less这样引入局部样式）// 这种不会全局污染！！！// 这种会全局污染。
vue多个组件使用同一数据
06-08
如果多个Vue组件需要使用相同的数据，可以考虑使用Vuex进行状态管理。Vuex是Vue.js官方的状态管理库，它可以帮助我们集中管理组件之间共享的数据。 具体实现步骤如下： 1. 在Vuex中定义一个state对象，存储需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值