表单

代码演示

Preview

查看代码

html

<n-card title="新增表单示例" :bordered="false">
    <a-form :model="formShowConf.objForm" :labelCol="{xs:24,sm:4,lg:4}" :wrapperCol="{xs:24,sm:12,lg:12}">
        <!--日历-->
        <a-form-item label="开始时间" v-bind="validateInfos.oStartTime" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
            <a-date-picker style="width: 100%" :getPopupContainer="triggerNode => triggerNode.parentNode || document.body" placeholder="" v-model:value="formShowConf.objForm.oStartTime" value-format="YYYY-MM-DD" extra="" />
        </a-form-item>
        <!--日历-->
        <a-form-item label="结束时间" v-bind="validateInfos.oEndTime" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
            <a-date-picker style="width: 100%" :getPopupContainer="triggerNode => triggerNode.parentNode || document.body" placeholder="" v-model:value="formShowConf.objForm.oEndTime" value-format="YYYY-MM-DD" extra="" />
        </a-form-item>
        <!-- 省市级联选择 -->
        <a-form-item label="省市级联选择" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
            <a-cascader v-model:value="formShowConf.citySelectValue" :options="formShowConf.citys" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode || document.body" />
        </a-form-item>
        <!-- 下拉选择框 -->
        <a-form-item label="下拉选择" v-bind="validateInfos.oState">
            <a-select v-model:value="formShowConf.objForm.oState" placeholder="请选择" :options="formShowConf.oOptionData.oStateOptions" allowClear></a-select>
        </a-form-item>
        <!-- 输入框 -->
        <a-form-item label="昵称" v-bind="validateInfos.oNickname">
            <a-input v-model:value="formShowConf.objForm.oNickname" placeholder="" id="oNickname" name="oNickname" extra=""></a-input>
        </a-form-item>
        <!-- 输入框 -->
        <a-form-item label="手机号" v-bind="validateInfos.oPhone">
            <a-input v-model:value="formShowConf.objForm.oPhone" placeholder="" id="oPhone" name="oPhone" extra=""></a-input>
        </a-form-item>
        <!-- 输入框 -->
        <a-form-item label="标题" v-bind="validateInfos.oTitle">
            <a-input v-model:value="formShowConf.objForm.oTitle" placeholder="" id="oTitle" name="oTitle" extra=""></a-input>
        </a-form-item>
        <!-- <a-form-item label="内容编辑" v-bind="validateInfos.oTextInfo" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <n-ueditor v-model:value="formShowConf.objForm.oTextInfo"></n-ueditor>
        </a-form-item> -->
        <a-form-item label="是否开启">
            <a-switch v-model:checked="formShowConf.objForm.oOpen" :checkedValue="1" :unCheckedValue="0" id="" name=""></a-switch>
        </a-form-item>
        <a-row>
            <a-col :lg="{offset:4}" :xs="{offset:0}" :sm="{offset:8}">
                <a-button type="primary" @click="formShowConf.save">保存</a-button>
                <a-button class="ml" @click="formShowConf.cancel">取消</a-button>
            </a-col>
        </a-row>
    </a-form>
</n-card>

vue

<script setup>
const formShowConf = reactive({
    citys: [],
    // 表单对应的字段名
    objForm: {
        oNickname: "",
        oPhone: "",
        oTitle: "",
        oTextInfo: "",
        oProvince: "",
        oCity: "",
        oState: null,
        oStartTime: "",
        oEndTime: "",
        oOpen: "",
    },
    citySelectValue: undefined,
    // 校验规则，验证器：https://www.antdv.com/components/form-cn#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99
    rules: {
        oNickname: [{ required: true, min: 0, max: 32, message: "昵称不能小于32个字符！" }],
        oPhone: [{ required: true, min: 0, max: 11, message: "手机号不能小于11个字符！" }],
        oTitle: [{ required: true, min: 0, max: 32, message: "标题不能小于32个字符！" }],
        oTextInfo: [{ required: true, min: 0, max: 65535, message: "内容编辑不能小于65535个字符！" }],
        oStartTime: [{ required: true, min: 1, message: "StartTime不能小于1个字符！" }],
        oEndTime: [{ required: true, min: 1, message: "EndTime不能小于1个字符！" }],
    },
    save: function () {
        // formShowConf.objForm.oProvince = formShowConf.citySelectValue[0];
        // formShowConf.objForm.oCity = formShowConf.citySelectValue[1];
        validate().then(() => {
            oApi.showAdd(formShowConf.objForm).then(res => {
                if (res.error == 1) {
                    message.success(res.msg)
                }
                else {
                    message.success('添加成功')
                    utils.redirect(3, '/demo/show/index')
                }
            })
        })
    },
    cancel: function () {
        // utils.redirect(3, '/demo/show/index')
    },
    // 下拉选择项配置
    oOptionData: {
        oStateOptions: [
          { label: '开启', value: '1' },
          { label: '关闭', value: '0' },
        ],
        oEnumValOptions: [],
    },
    //配置文件的设置
    getConfigUniSingle: function (data = {}, callback) {
        oApi.showConf({ action: 'unimain', ...data }).then(res => {
            callback(res);
        })
    },
})

// 导出useForm对象，拿到validate和validateInfos方法
// validate是校验方法，通过之后走.then失败走catch
const useForm = AForm.useForm;
const { validate, validateInfos } = useForm(formShowConf.objForm, formShowConf.rules, {
    onValidate: (...args) => {
    }
})
</script>

样式说明

通过栅格控制表单label和input的所占宽度如:

时间选择、地区选择:

<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">

输入框:

<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">

编辑器:

<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">

表单 ​

代码演示 ​

样式说明 ​

表单

代码演示

样式说明