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

news2024/9/20 5:52:14

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

在这里插入图片描述

一、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 生成代码

这个就按照常规操作

三、修改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.coloradmin.cn/o/2083056.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ORA-16072: a minimum of one standby database destination is required

原因 Doc ID 260819.1 The problem is that these Data Guard protection mode will not allow the database to be opened without a Standby Database available and a corresponding setup log_archive_dest_n. Therefore the Data Guard Protection Mode must be reduced…

MATLAB 地面点构建三角网(83)

MATLAB 地面点构建三角网(83) 一、算法介绍二、算法实现1.代码一、算法介绍 使用少量的抽稀后的地面点。构建了一层2.5维的三角网,用于表示地形的起伏变化,随着点数量增多,构建和耗时都会相应增加,这里只是输出和研究三角网构建效果,并不做实际工程使用,具体的构建结果…

在容器 (podman) 中运行虚拟机 (QEMU/KVM, libvirt)

虚拟机 (virtual machine) 是一种计算机的虚拟化技术, 容器 (container) 是一种更轻量级的虚拟化技术. 虚拟机可以套娃 (嵌套, nest), 也就是在虚拟机中运行虚拟机. 容器也可以套娃, 比如 Docker in Docker, Podman in Podman, Podman in Docker 等. 容器和虚拟机也可以互相套娃…

【云原生之kubernetes实战】k8s环境中部署Nginx服务

【云原生之kubernetes实战】k8s环境中部署Nginx服务 一、Nginx介绍1.1 Nginx简介1.2 Nginx特点1.3 Nginx使用场景二、本次实践介绍2.1 本次实践简介2.2 本次环境规划三、检查k8s环境3.1 检查工作节点状态3.2 检查系统pod状态四、部署storageclass(可选)4.1 配置NFS服务器4.2 …

Leetcode42接雨水(单调栈)

题目 题目链接 解法一 求出前缀最大和后缀最大&#xff0c;用两者较小值减去当前高度&#xff0c;累加即可&#xff0c;这个思路容易想到&#xff0c;这里不赘述 class Solution { public:int trap(vector<int>& height) {vector<int> preMx(height.size()…

故障检测(同相/反相放大器+电压跟随器)+概念(开环/闭环增益+增益的频率依赖性+3dB/单位增益带宽+增益-频率依赖性+相移)

2024-8-28&#xff0c;星期二&#xff0c;20:19&#xff0c;天气&#xff1a;阴雨&#xff0c;心情&#xff1a;晴。今天没什么事情发生&#xff0c;继续学习。 今天完成了第六章运算放大器的学习&#xff0c;开始了第七章运算放大器响应的学习&#xff0c;主要学习内容为&…

毕 业 设 计(论 文)远程接入企业网络规划与设计

毕 业 设 计&#xff08;论 文&#xff09; 远程接入企业网络规划与设计 毕业设计论文中文摘要 随着Internet技术的日益普及&#xff0c;网络技术的飞速发展&#xff0c;企业信息化工作越来越受到重视&#xff0c;进入二十一世纪后&#xff0c;企业信息化不再满足于个人或单…

使用WireShark的tshark命令,在window系统Cmd命令行抓包(附环境变量的设置)

WireShark在window系统Cmd命令行的抓包应用 工作中&#xff0c;有时候会遇到抓特定数据包的情况&#xff0c;但是却不知道这个特定数据包什么时候出现。因此就需要有设备值守抓包&#xff0c;这时就可以使用wireshark提供的tshark命令抓包。 一、抓包需求&#xff1a; 例如&am…

【虚拟化】KVM常用命令操作(virsh虚拟机常用操作之开关|连接|自启|克隆|快照)

目录 ​编辑一、KVM概述 1.1 KVM工具栈 1.2 libvirt架构概述 二、使用virsh管理虚拟机 三、kvm基本功能管理 1.帮助命令 2.KVM的配置文件存放目录 3.查看虚拟机状态 4.虚拟机关机与开机 5.强制虚拟机系统关闭电源 6.通过配置文件启动虚拟机系统 7.修改虚拟机配置文…

【项目实战】MobileNetV3 医学病理识别+不使用全连接预测+迁移学习+附代码数据教程

目录 简言. 环境搭建&快速开始 1. 数据集制作 2、训练教程 2.1 迁移学习 2.2 卷积自编码器,不使用全连接 2.3训练 3 实际推理 结果: 简言. 环境搭建&快速开始 大家好,我是cv君,今天带来以前的干货,mobilenet v3的优化,能在医学病理分类中得到优异准确率…

C++语法基础(一)

第一个C程序 1. <iostream>&#xff08;C&#xff09; <iostream> 是 C 标准库中的头文件&#xff0c;用于处理输入输出操作。它提供了基于流&#xff08;stream&#xff09;的输入输出机制。 特点&#xff1a; 面向对象&#xff1a;C 中的输入输出操作是基于流…

力扣面试经典算法150题:加油站

加油站 今天的题目是力扣面试经典150题中的数组的中等难度题&#xff1a;加油站。 题目链接&#xff1a;https://leetcode.cn/problems/gas-station/description/?envTypestudy-plan-v2&envIdtop-interview-150 问题描述 在一条环路上有 n 个加油站&#xff0c;其中第 i…

pySCENIC报错、解决和完整流程(IOS系统)

该文首发于生信技能树&#xff0c;推文链接&#xff1a;https://mp.weixin.qq.com/s/W23Reg6Hi4XWxpMvfctP8g 明白了基因调控网络的基础知识之后&#xff0c;就可以尝试实际操作一下SCENIC分析。 基因调控网络的基础知识可见推文&#xff1a;https://mp.weixin.qq.com/s/sL_8…

海康二次开发学习笔记4-参数模块配置

参数模块配置 参数配置控件 工具箱中提供了两个参数配置控件. VmParamsConfigControl是不带渲染的参数配置控件.VmParamsConfigWithRenderControl是带渲染的参数配置控件. 1. VmParamsConfigWithRenderControl 配置模块数据源 private void button3_Click(object sender, …

90%的设计师都不知道的设计神器,教你一招快速搞定中秋节创意海报设计!

设计师们&#xff0c;这是不是你&#xff1a;素材多到眼花缭乱&#xff0c;想用的时候总是找不到&#xff1f;海报设计千篇一律&#xff0c;完美没灵感&#xff1f;别担心&#xff0c;今天就来聊聊如何用千鹿设计助手&#xff0c;快速制作一张创意满满的中秋海报&#xff01; …

若依后端 MyBatis改为MyBatis-Plus

引用 1.引入MyBatis-Plus依赖 在总目录的pom.xml&#xff0c;导入依赖 <mybatis-plus.version>3.4.3</mybatis-plus.version> <!-- mybatis-plus 增强CRUD --> <dependency> <groupId>com.baomidou</groupId> <artifactId>…

关机软件项目规划

一、概述 1.1 编写目的 此项目开发规划书的编写主要是为《UPS SNMP卡网络监控系统》中配套使用的关机软件做主要的规划和整合&#xff0c;在开发过程中起到引导作用&#xff0c;以及给使用者提供简要的说明。 1.2 项目背景 关机软件是UPS网络监控适配器项目监控层的组成部分…

16岁激活交学费银行卡需要本人实名电话卡,线下营业厅不给办,怎么办?

16岁激活交学费银行卡需要本人实名电话卡&#xff0c;线下营业厅不给办&#xff0c;怎么办&#xff1f; 话卡办理规定&#xff1a; 根据《民法典》和《电话用户真实身份信息登记规定》的相关要求&#xff0c;未满16周岁的用户通常需要在监护人的陪同下办理电话卡&#xff0c;并…

IO多路复用几种函数

1. select() 函数原型 int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct timeval *timeout);参数说明 nfds&#xff1a;指定文件描述符的范围。这个值应设置为所有文件描述符中最大值加一。例如&#xff0c;如果监视的文件描述符是 0 到 …

斯坦福大学cs231n (图像分类)

1.介绍 当作图像分类时&#xff0c;分类系统接收一些分类图像&#xff0c;比如猫咪。并且系统清楚了一些已经确定了分类或者标签的集合。那么&#xff0c;计算机的工作就是根据图片&#xff0c;给他分配一些固定的分类或者标签。 对于一个计算机来说&#xff0c;这是一个非常…