jnpf低代码平台生成的代码默认是弹框，使用这个方法可以改为页面。

{
  path: '/hnd/mt770952890607996997/form',
    component: () => import('@/views/hnd/mt770952890607996997/FormPage.vue'),
    name: 'mt770952890607996997Form',
    meta: {
    title: 'routes.basic.mt770952890607996997Form',
      defaultTitle: '表单页面',
      icon: 'icon-ym icon-ym-btn-add',
      },
},

如果需要新增页面，直接在这路 直接cp一份。改改参数。

列表页面的增删改查按钮改为router.push接口跳转。

// 编辑
  function updateHandle(record) {
    // 跳转到表单页面编辑
    router.push({
      path: '/hnd/mt770952890607996997/form',
      query: { id: record.id },
    });
  }
  // 删除
  function handleDelete(id) {
    const query={ids:[id] }
    batchDelete(query).then((res) => {
      createMessage.success(res.msg);
      clearSelectedRowKeys();
      reload();
    });
  }
  // 查看详情
  function goDetail(record) {
    // 跳转到表单页面查看详情
    router.push({
      path: '/hnd/mt770952890607996997/form',
      query: { id: record.id, type: 'detail' },
    });
  }
  // 新增
  function addHandle() {
    // 跳转到表单页面新增
    router.push({
      path: '/hnd/mt770952890607996997/form',
    });
  }

这一步做好了之后，点击按钮触发函数监听跳转页面FromPages.vue。（跳转的vue文件需要提前准备好）

1、可以用我搭建好的页面框架。

直接在from搜<a-row class="dynamic-form">。折叠<a-row  选中整个折叠区域 展开复制代码。到 frompages页面

3、字段、校验、maskConfig、changeData 逻辑保持一致。

去掉 BasicModal/useModal、setModalProps、openModal、changeLoading、onClose。

页面下增加，并给输入框绑定:disabled="isDetail"

生成页面的 changeData、changeDataFormData、getRelationDate/Time 业务逻辑，直接从 Form.vue 复制到 FormPage.vue，并把 state 里的字段 dataForm、dataRule、maskConfig、interfaceRes 照搬。

后续需要校验的参数直接写里边。与弹框一致。

frompage就是模板。可以从最简单的示例

这个看起。这个表单只有三个字段。减少代码的干扰。

把里边from里边的弹框内容，，直接cp到fromapge里。但是要确保：state.dataForm 字段和模板字段一致。

如果遇到报错。。直接看vue报错。。缺那个参数就cp过来。。。

mt770952890607996997.zip

jnpf低代码弹框改页面

Java开发

前端

低代码

JNPF低代码平台表单弹框改页面教程：1.改造路由配置，新增页面直接复制修改参数；2.修改列表页跳转方式为router.push；3.复制表单内容到新页面，保留业务逻辑和校验规则；4.去除弹框相关代码，添加详情禁用状态。操作简单，遇到报错直接补全缺失参数即可。

路由

2026上云采购 | AI焕新·智启新局

weda

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

jnpf低代码弹框改页面

jnpf低代码弹框改页面

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐