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

本文主要是介绍uni-app开发日志：新增页和修改页因字段太多用分段器实现分段分类，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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}},
...

这篇关于uni-app开发日志：新增页和修改页因字段太多用分段器实现分段分类的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---