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

news2024/9/24 17:17:28

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>
  <view v-if="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-if="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/2078047.html

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

相关文章

【Hot100】LeetCode—46. 全排列

目录 1- 思路回溯 2- 实现⭐46. 全排列——题解思路 3- ACM 实现 题目连接&#xff1a;46. 全排列 1- 思路 回溯 由于是排列问题&#xff0c;需要讲究元素顺序。元素相同顺序不同是不同的排列&#xff0c;而组合问题不强调元素顺序。组合中的 startIndex 是用来保证&#xff…

如何用Java SpringBoot+Vue打造法律援助平台?毕业设计全攻略

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

【区间dp】 CF607B Zuma 题解

题面翻译 Genos \texttt{Genos} Genos 最近在他的手机上下载了祖玛游戏。在祖玛游戏里&#xff0c;存在 n ( 1 ≤ n ≤ 500 ) n(1\leq n\leq 500) n(1≤n≤500) 个一行的宝石&#xff0c;第 i i i 个宝石的颜色是 C i C_i Ci​。这个游戏的目标是尽快的消灭一行中所有的宝石…

python 实现zellers congruence泽勒一致算法

zellers congruence泽勒一致算法介绍 Zeller’s Congruence&#xff08;泽勒一致算法&#xff09;是一种用于计算给定日期是星期几的算法。这个算法可以处理公历&#xff08;Gregorian calendar&#xff09;和儒略历&#xff08;Julian calendar&#xff09;日期。其核心公式如…

SpringBoot实战:Spring Boot项目使用SM4国密加密算法

引言 在业务系统构建与部署的环节中&#xff0c;数据库作为核心存储组件&#xff0c;其连接信息的安全至关重要。通常情况下&#xff0c;这些敏感信息&#xff0c;如数据库密码&#xff0c;会直接以明文形式存储在YAML配置文件中&#xff0c;这无疑增加了信息泄露的风险。为有效…

用EA和SysML一步步建模的操作指南(01)

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 对于许多学习SysML和MBSE的同学来说&#xff0c;比较头痛的问题之一是&#xff1a;各种各样的教程里给出的案例&#xff0c;图都是画好了的&#xff01;如何从零开始用建模工具把模型画…

【企业级】像素流管理平台 V1.0

在当今快速发展的数字世界里&#xff0c;虚幻引擎的像素流技术为用户带来了前所未未有的视觉体验和交互方式。为了进一步提升开发效率和用户体验&#xff0c;我们【企业级】像素流管理平台 V1.0应运而生。通过一系列精心设计的功能&#xff0c;这个平台不仅简化了开发流程&…

解锁流量密码!财谷通助力抖音小店优势最大化!

在数字经济蓬勃发展的今天&#xff0c;电商平台如雨后春笋般涌现&#xff0c;其中&#xff0c;抖音小店以其独特的短视频直播模式&#xff0c;成为了众多商家和消费者青睐的新宠。而提及四川财谷通信息技术有限公司在抖音平台上开设的小店&#xff0c;其可靠性更是备受瞩目。本…

初识AOP

Spring有两个核心的概念&#xff0c;一个是IOC/DI&#xff0c;一个是AOP。 AOP是在不改原有代码的前提下对其进行增强。 对于下面的内容&#xff0c;我们主要就是围绕着这一句话进行展开学习&#xff0c;主要学习两方面内容AOP核心概念,AOP作用: 1 什么是AOP? AOP(Aspect O…

【2024】10个好用的AI搜索引擎大盘点

在2024年&#xff0c;随着人工智能技术的飞速发展&#xff0c;AI搜索引擎已经成为我们日常生活中不可或缺的一部分。这些基于人工智能技术的搜索引擎不仅提供了更快速、更准确的搜索体验&#xff0c;还通过自然语言处理&#xff08;NLP&#xff09;和机器学习&#xff08;ML&am…

ECharts tooltip默认html样式,保留样式只对数据数值格式化

之前遇到过需要对数据进行百分比展示&#xff0c;echarts提供的默认样式还是挺好的所以想保留样式&#xff0c;但是设置了formatter默认样式就没了&#xff0c;所以写了formatter的html字符串模拟还原了一下默认样式&#xff0c;在此记录和分享。 适用场景&#xff1a;对数据进…

Datawhale X 李宏毅苹果书 AI夏令营 task1

3.1 局部极小值与鞍点 在深度学习的优化过程中&#xff0c;模型的损失函数可能会在某些点处停止下降&#xff0c;即使我们希望进一步降低损失。这一章节探讨了导致这一现象的原因&#xff0c;包括局部极小值、鞍点&#xff0c;以及其他临界点。理解这些概念能够帮助优化神经网…

注册资本登记新规14问

2023年12月29日修订的《公司法》第四十七条规定&#xff0c;全体股东认缴的出资额由股东按照公司章程的规定自公司注册成立之日起五年内缴足。根据这个规定&#xff0c;存量公司注册资本缴纳期限如何调整还需要进一步明确规定。 就在新公司法正式实施的同一天&#xff0c;2024…

AI新格式超越SD,更轻更快的Flux

随着《黑神话悟空》的横空出世&#xff0c;全民“天命人”大杀四方。 与此同时&#xff0c;AI绘画大模型领域也是群雄逐鹿。 Stable Diffusion作为开源AI绘画大模型鼻祖&#xff0c;推出了SD3&#xff0c;但因为加入了对身体的限制&#xff08;防止涩涩&#xff09;&#xff…

【架构-24】XML和JSON

XML&#xff08;可扩展标记语言&#xff09;和JSON&#xff08;JavaScript对象表示法&#xff09;是两种常用的数据格式&#xff0c;用于在不同系统之间传输和交换数据。它们各有优点和缺点&#xff0c;适用于不同的场景。下面是对XML和JSON的简要介绍以及它们之间的对比。 XM…

武汉流星汇聚:亚马逊第二季度业绩斐然,第三季度展望充满积极动能

在全球电商与科技巨头竞相角逐的舞台上&#xff0c;亚马逊再次以亮眼的财报数据证明了其行业领导者的地位。近日&#xff0c;亚马逊公布的2024财年第二季度财报不仅彰显了公司在复杂经济环境下的稳健增长能力&#xff0c;更为投资者和消费者描绘了一幅充满希望的未来图景。 第…

Mac 笔记本折腾mac windows Linux 三系统(全网独一份)

1.正常安装 mac 可以使用启动盘或者在线恢复 按下并松开电源按钮以将Mac 开机&#xff0c;松开电源按钮按 Option-Command-R 安装最新软件 将整个盘进行抹掉安装&#xff0c;为后面安装windows 进行准备 2.bootcamp 安装 win11&#xff0c;选择系统镜像&#xff0c;我这里最新…

STM32(F103ZET6)第六课:定时器

目录 定时器需求一、系统滴答定时器1.配置流程2.程序配置 二、基本定时器1.TIM6定时器配置1.时钟源使能2.分频器3.装载值4.计数器使能5.打开定时器中断并配置6.中断函数编写 三、通用定时器TIM2 定时器需求 1.使用系统滴答定时器实现LED灯的翻转&#xff08;0.5s翻转一次&…

变压器涌流浪涌

涌流和浪涌 1. 相关概念简介 涌流 基本概念及分析意义&#xff1a; 涌流基本概念&#xff1a;指在断电或重新通电后&#xff0c;瞬时大电流从电源流向负载的现象。 在电力系统中&#xff0c;涌流的出现与许多因素有关&#xff0c;例如电源电压、负载电容和电感等&#xff…

uniapp环境H5运行及发行(入门必学)

uniapp环境H5运行及发行 Uni-app是一个使用Vue.js开发所有前端应用的框架&#xff0c;它可以编译到iOS、Android、H5、以及各种小程序等多个平台。关于Uni-app环境下H5的运行及发行&#xff0c;以下是详细的步骤和注意事项&#xff1a; 一、H5运行 安装环境 安装Node.js&…