uni-app开发日志:schema2code生成的新增页和修改页因字段太多用分段器实现分段分类

ops/2024/10/19 7:18:37/

schema2code默认只能实现较为简单的分组,当填写项目较多的时候,肯定是用选项卡明确分段比较合适,这时候schema2code自生成的就没法实现了,摒着最最少的代码修改来尝试设置生成前的schema和生成后的vue页面。

在这里插入图片描述

schema_5">一、schema设计

先把group属性加入每个字段中,即设计的时候就先安排好

...
"id": {"bsonType": "string","title": "编号","group": "1"
},
"name": {"bsonType": "string","title": "名称","group": "1"
},
"key": {"bsonType": "string","title": "标识","group": "1"
},
"remark": {"bsonType": "string","title": "备注","group": "2"
},
"sort": {"bsonType": "string","title": "排序","group": "2"
},
...

schema2code__39">二、schema2code 生成代码

这个就按照常规操作

三、修改add.vue和edit.vue

官网:uni-segmented-control分段器

1. 增加一个分段器

直接用官网案例

...
<view class="uni-padding-wrap uni-common-mt"><uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
</view>
...

2. 修改每个uni-group

参考官网

  • 原代码:
<uni-forms><uni-group><uni-forms-item label="编号"><input placeholder="请输入编号" /></uni-forms-item><uni-forms-item label="名称"><input placeholder="请输入名称" /></uni-forms-item><uni-forms-item label="标识"><input placeholder="请输入标识" /></uni-forms-item></uni-group><uni-group><uni-forms-item label="备注"><input placeholder="请输入备注" /></uni-forms-item><uni-forms-item label="排序"><input placeholder="请输入排序" /></uni-forms-item></uni-group>
...
  • 新代码
    其实就是把uni-group改为带条件的view,复制黏贴改个值即可
<uni-forms><!--// 虽然也可以用if,但用if会导致每次点击重新渲染页面,从而可能审核报错,比如第一页有控件必填,点了第二项目之后该控件没了~~--><!--//<view v-if="current === 0">--><view v-show="current === 0"><uni-forms-item label="编号"><input placeholder="请输入编号" /></uni-forms-item><uni-forms-item label="名称"><input placeholder="请输入名称" /></uni-forms-item><uni-forms-item label="标识"><input placeholder="请输入标识" /></uni-forms-item></view ><view v-show="current === 1"><uni-forms-item label="备注"><input placeholder="请输入备注" /></uni-forms-item><uni-forms-item label="排序"><input placeholder="请输入排序" /></uni-forms-item></view >
...

3. 增加变量

官网代码修改成自己的,用在分段器 uni-segmented-control

...
return {/*分段标签卡*/items: ['选项卡1', '选项卡2', '选项卡3'],current: 0,activeColor: '#007aff',styleType: 'button',
...

4. 增加点击函数

直接官网代码拿来用,用在分段器 uni-segmented-control

...
methods: {onClickItem(e) {if (this.current !== e.currentIndex) {this.current = e.currentIndex}},
...

在这里插入图片描述


http://www.ppmy.cn/ops/101231.html

相关文章

基于Python的网易民谣歌词数据分析的设计与实现

基于Python的网易民谣歌词数据分析的设计与实现 Design and Implementation of Data Analysis for NetEase Folk Song Lyrics Based on Python 完整下载链接:基于Python的网易民谣歌词数据分析的设计与实现 文章目录 基于Python的网易民谣歌词数据分析的设计与实现摘要第一章…

MySQL主从复制之GTID模式

目录 1 MySQL 主从复制 GTID 模式介绍 2 传统复制模式与GTID复制模式的区别 3 GTID模式核心参数 4 GTID 实现自动复制原理 4.1 GTID基本概念 4.2 GTID复制流程 5 GTID 实现自动定位 5.1 配置 my.cnf 5.2 配置 SLAVE 实现自动定位 5.3 测试 6 GTID 模式 故障转移的方法流程 6.1…

Nginx实现反向代理负载均衡实验

一、Nginx反向代理-负载均衡 Nginx 是一个 高性能的 HTTP 和反向代理 web 服务器 &#xff0c;同时也提供了 IMAP/POP3/SMTP 服务。因它的稳定 性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名&#xff01;能够支持高达 50,000 个并发连接数 的响应。 Nginx…

【智能合约】智能合约的概念与实现

智能合约 智能合约的概念与实现 引言 智能合约&#xff08;Smart Contract&#xff09;是区块链技术的一项核心创新&#xff0c;它通过自动执行合约条款&#xff0c;消除了对中介机构的依赖&#xff0c;为金融、供应链、保险等多个行业带来了深远的变革。本文将介绍智能合约的…

qemu:gpio使用

文章目录 定义gpio_in定义使用验证 定义gpio_out结构体添加irq初始化irq定义使用 将gpio_in与gpio_out联合起来定义使用 定义gpio_in qdev_init_gpio_in_named qdev_get_gpio_in_named 定义 /*** qdev_init_gpio_in_named() - create an array of input GPIO lines* dev: de…

运维有必要学编程吗?应该学哪种编程语言?

在以往的观念中&#xff0c;运维的工作内容是不涉及编程、开发的&#xff0c;因此以前也没用学编程的需求。然而随着互联网的发展和变化&#xff0c;现如今&#xff0c;运维也需要开始接触开发&#xff0c;接触编程了。 当然有很多运维朋友&#xff0c;本身是不认可的。可&…

SSRF 302跳转攻击redis写入ssh公钥实现远程登录

目录 SSRF漏洞 SSRF攻击Redis 302跳转 漏洞复现&#xff1a; index.html: index.php: 攻击步骤&#xff1a; 1.生成ssh公钥数据&#xff1a; 2.用SSH公钥数据伪造Redis数据&#xff1a; 3.在自己的服务器上写302跳转&#xff1a; 4.最后尝试在.ssh目录下登录&#…

EasyExcel冲突问题,java.lang.NosuchFieldError: Factory

我在项目中使用EasyExcel,本以为是一个简单的导出功能,应该很快。但是问题出现了,导出的时候报错 com.alibaba.excel.exception.ExcelGenerateException Create breakpoint java.lang.NosuchFieldError: Factory at com.alibaba.excel.write.ExcelBuilderImpl.<init>(…