Vben Admin—— Vben Admin BasicModal 弹窗 updateSchema 动态设置表单某个字段是否必填

最新推荐文章于 2025-04-23 16:36:30 发布

dbt@L

最新推荐文章于 2025-04-23 16:36:30 发布

阅读量309

点赞数 1

分类专栏： Vben Admin 文章标签： Vben Admin

本文链接：https://blog.csdn.net/qq_43201350/article/details/144472843

版权

Vben Admin 专栏收录该内容

20 篇文章

订阅专栏

重点：updateSchema
Vben Admin updateSchema 官网
用法：
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<template>
    <BasicModal :destroy-on-close="true" @register="registerModal" title="标题" width="1400px">
        <BasicForm @register="registerForm">
        </BasicForm>
    </BasicModal>
</template>

<script lang="ts" setup name="demo">
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import {
    formSchema,
} from './index';
import { onMounted, ref } from 'vue';
const order = ref({});
onMounted(async () => {

});

const [registerModal, { closeModal }] = useModalInner(async (data) => {
    try {
        // 动态判断demo2 要不要必填
        if (1 == 1) {
            updateSchema([
                {
                    field: 'demo2',
                    required: true,
                },
            ]);
        }
    } catch (error) {
        console.log(error);
    }
});
const [registerForm, { validate, getFieldsValue, setFieldsValue, updateSchema }] = useForm({
    labelWidth: 120,
    baseColProps: { span: 24 },
    schemas: formSchema,
    showActionButtonGroup: false,
    actionColOptions: {
        span: 23,
    },
});

</script>

<style lang="scss" scoped></style>

index 文件

export const formSchema = [
  {
    dataIndex: "demo1",
    title: "文本一",
  },
  {
    dataIndex: "demo2",
    title: "文本二",
  },
];