摘要
在Web开发中，表单处理是一个非常重要的环节，特别是当需要用户输入具有特定范围的数值时，比如价格区间、时间范围等。Jeesite作为一款强大的企业级快速开发平台，提供了丰富的表单组件来帮助开发者快速构建高质量的Web应用。本文将介绍如何在Jeesite的BasicForm表单中使用InputGroup组件来实现区间数值输入控件，例如输入一个数值范围10-100。
一、引言
二、InputGroup组件基本使用
示例代码
例子：
https://gitee.com/thinkgem/vue-vben-admin/blob/main/src/views/demo/page/form/step/data.tsx
import { FormSchema } from '/@/components/Form';export const step1Schemas: FormSchema[] = [{field: 'account',component: 'Select',label: '付款账户',required: true,defaultValue: '1',componentProps: {options: [{label: 'anncwb@126.com',value: '1',},],},},{field: 'fac',component: 'InputGroup',label: '收款账户',required: true,defaultValue: 'test@example.com',slot: 'fac',},{field: 'pay',component: 'Input',label: '',defaultValue: 'zfb',show: false,},{field: 'payeeName',component: 'Input',label: '收款人姓名',defaultValue: 'Vben',required: true,},{field: 'money',component: 'Input',label: '转账金额',defaultValue: '500',required: true,renderComponentContent: () => {return {prefix: () => '￥',};},},];export const step2Schemas: FormSchema[] = [{field: 'pwd',component: 'InputPassword',label: '支付密码',required: true,defaultValue: '123456',},];
step.vue页面
<template><div class="step1"><div class="step1-form"><BasicForm @register="register"><template #fac="{ model, field }"><a-input-group compact><a-select v-model:value="model['pay']" class="pay-select"><a-select-option value="zfb"> 支付宝 </a-select-option><a-select-option value="yl"> 银联 </a-select-option></a-select><a-input class="pay-input" v-model:value="model[field]" /></a-input-group></template></BasicForm></div><a-divider /><h3>说明</h3><h4>转账到支付宝账户</h4><p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p><h4>转账到银行卡</h4><p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p></div></template><script lang="ts">import { defineComponent } from 'vue';import { BasicForm, useForm } from '/@/components/Form';import { step1Schemas } from './data';import { Select, Input, Divider } from 'ant-design-vue';export default defineComponent({components: {BasicForm,[Select.name]: Select,ASelectOption: Select.Option,[Input.name]: Input,[Input.Group.name]: Input.Group,[Divider.name]: Divider,},emits: ['next'],setup(_, { emit }) {const [register, { validate }] = useForm({labelWidth: 100,schemas: step1Schemas,actionColOptions: {span: 14,},showResetButton: false,submitButtonOptions: {text: '下一步',},submitFunc: customSubmitFunc,});async function customSubmitFunc() {try {const values = await validate();emit('next', values);} catch (error) {}}return { register };},});</script><style lang="less" scoped>.step1 {&-form {width: 450px;margin: 0 auto;}h3 {margin: 0 0 12px;font-size: 16px;line-height: 32px;color: @text-color;}h4 {margin: 0 0 4px;font-size: 14px;line-height: 22px;color: @text-color;}p {color: @text-color;}}.pay-select {width: 20%;}.pay-input {width: 70%;}</style>
注意：上述代码是基于Vue和Jeesite可能的集成方式编写的代码，具体实现时需要根据Jeesite的实际组件和API进行调整。
三、高级使用技巧
1. 实时验证
2. 样式自定义
3. 组件封装
四、总结
官方网站
https://www.jeesite.com/
前端技术交流：
官方交流：
