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

server/2024/10/19 19:33:23/

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/server/107067.html

相关文章

Vitis AI 基本认知(Tiny-VGG 项目代码详解)

目录 1. 简介 1.1 Tiny-VGG 1.2 data 目录结构 2. 代码分析 2.1 Import packages 2.2 Dataset 2.3 Train step 2.4 Vali & Test step 2.5 Ceate model 2.6 Compile model 2.6.1 计算 loss 2.6.2 计算平均值 3.6.3 计算准确度 2.7 训练循环 2.7.1 自定义训练…

探索未来交互——Open LLM VTuber:一款基于AI大模型的二次元虚拟主播

随着人工智能技术的飞速发展,虚拟主播(VTuber)行业迎来了全新的变革。本文将介绍一个令人兴奋的开源项目——Open LLM VTuber,这是一个本地运行的、可高度定制的虚拟主播平台,它不仅支持多种语言模型(LLM)、自动语音识别(ASR)和文本转语音(TTS)后端,而且能够跨操作…

解决yum不能正常使用,报错: No module named yum,如何安装python2和python3并行版本,搭建自动化环境

嗨,我是兰若姐姐,今天在用yum安装python的时候,发现yum整个都不能使用了,但是之前都是好好的,yum相关的命令都是可以正常使用,所以可以判断的是,yum是在我之后的操作过程中被搞坏了,为了恢复yum只能一步步的排查,现在执行yum直接报错就是: No module named yum [cen…

Sequel Pro 连接 mysql 8.3 失败

Sequel Pro 连接 mysql 8.3 失败 报错如下&#xff1a; MySQL said: Authentication plugin caching_sha2_password cannot be loaded: dlopen(/usr/local/lib/plugin/caching_sha2_password.so, 0x0002): tried: /usr/local/lib/plugin/caching_sha2_password.so (no such fil…

力扣1074.元素和为目标值的子矩阵数量

力扣1074.元素和为目标值的子矩阵数量 前缀和 哈希表 见力扣363.枚举上下边界转化一维前缀和&#xff0c;用哈希表储存出现次数 class Solution {public:int numSubmatrixSumTarget(vector<vector<int>>& matrix, int k) {int ans 0;int m matrix.size()…

RISC-V全志D1sCVBS套件

此开发板的任何问题都可以在我们的论坛交流讨论 https://forums.100ask.net/c/10-category/75-category/75 硬件简述 D1s主板 主板如下&#xff1a; D1s板载功能 板载功能有 XR829 WIFI蓝牙模组芯片&#xff0c;Bluetooth支持标准蓝牙与 低功耗蓝牙&#xff0c;Wifi 支持…

机器学习概述与应用:深度学习、人工智能与经典学习方法

引言 机器学习(Machine Learning)是人工智能(AI)领域中最为核心的分支之一,其主要目的是通过数据学习和构建模型,帮助计算机系统自动完成特定任务。随着深度学习(Deep Learning)的崛起,机器学习技术在各行各业中的应用变得越来越广泛。在本文中,我们将详细介绍机器学…

【STM32】PWR电源控制(低功耗模式)

本篇博客重点在于标准库函数的理解与使用&#xff0c;搭建一个框架便于快速开发 目录 PWR简介 修改主频 低功耗模式 睡眠模式 停止模式 待机模式 PWR简介 PWR&#xff08;Power Control&#xff09;电源控制 &#xff0c;负责管理STM32内部的电源供电部分&#xff0c;可…