用户新增表单配置-PC端通用管理模块配置教程(3)

用户新增表单配置-PC端通用管理模块配置教程(3)

第一步:复制后台用户查询服务

在您的应用中,找到后台用户查询服务,复制一份作为用户新增服务的模板。

第二步:改为用户新增服务

  1. 修改流程:将后台组件方法调用改为调用用户表组件新增服务。
  2. 服务路径修改 :将服务路径改为/user/add

第三步:调试用户新增服务

  1. 新增用户名、密码入参:在用户新增服务中添加用户名和密码的参数。

第四步:配置用户管理页组件接口API配置

在用户管理页组件的API配置中,添加{新增: "/user/add"}

第五步:打开展示新增js

在用户管理页组件中,找到控制新增按钮显示的js,将其设置为true,以显示新增按钮。

第六步:配置表单字段配置

  1. 打开筛选表单配置js输入开关
  2. 配置筛选表单项项属性值,以数组形式配置,例如:
json 复制代码
[
    {
        "label": "用户名",
        "name": "用户名",
        "type": "input",
    },
    {
        "label": "密码",
        "name": "密码",
        "type": "input",
    },
]
标题: `label`
字段名: `name`
字段类型:`type` (
   `input`: 单行输入框,
   `number`: 数字输入框,
   `textarea`: 多行输入框,
   `select`: 下拉选择框,
   `richtext`: 富文本输入框,
   `date`: 开始结束日期时间,(`range`: `false`, `showTime`: `false`)
   `custom`: 自定义节点
)
 自定义节点渲染函数(当前表单实例): `render(form)`

第七步:点击新增后,会发现新增了一行,但用户名,密码是空的。

这表明目前表单还未绑定到数据,需要进一步配置。

第八步:配置后台自定义组件用户表组件

  1. 打开数据表字段配置js输入开关
  2. 配置数据表的字段属性值,以数组形式配置,例如:
json 复制代码
[
    {
        "dataIndex": "用户名",
        "operate": "search|filter|add|edit",
    },
    {
        "dataIndex": "密码",
        "operate": "filter|add|edit",
    },
]
     字段名: `dataIndex`
     字段操作权限(多个以|分隔): `operate` (
       `search`: 关键字搜索,
       `filter`: 精确匹配,
       `add`: 新增,
       `edit`: 编辑,
     )
     匹配类型:`filterType` (
        `between`: 范围
     )

请根据您的项目实际情况,将这些步骤和代码段应用到您的项目中。每个步骤都需要您在代码编辑器中实际操作,修改和添加代码。如果有任何疑问,请随时提问。

相关推荐
吾日三省吾码4 小时前
JVM 性能调优
java
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
弗拉唐5 小时前
springBoot,mp,ssm整合案例
java·spring boot·mybatis
sun0077005 小时前
ubuntu dpkg 删除安装包
运维·服务器·ubuntu
oi775 小时前
使用itextpdf进行pdf模版填充中文文本时部分字不显示问题
java·服务器
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css