版本更新至2.11.5

Ben Lin

2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25

 src/views/demo/form/RefForm.vue

@@ -7,6 +7,8 @@
      <a-button @click="setProps({ size: 'default' })" class="mr-2"> 还原Size </a-button>
      <a-button @click="setProps({ disabled: true })" class="mr-2"> 禁用表单 </a-button>
      <a-button @click="setProps({ disabled: false })" class="mr-2"> 解除禁用 </a-button>
      <a-button @click="setProps({ readonly: true })" class="mr-2"> 只读表单 </a-button>
      <a-button @click="setProps({ readonly: false })" class="mr-2"> 解除只读 </a-button>
      <a-button @click="setProps({ compact: true })" class="mr-2"> 紧凑表单 </a-button>
      <a-button @click="setProps({ compact: false })" class="mr-2"> 还原正常间距 </a-button>
      <a-button @click="setProps({ actionColOptions: { span: 8 } })" class="mr-2">
@@ -64,12 +66,13 @@
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, FormSchema, FormActionType, FormProps } from '/@/components/Form/index';
  import { CollapseContainer } from '/@/components/Container/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
<script lang="ts" setup>
  import { nextTick, ref, unref } from 'vue';
  import { BasicForm, FormSchema, FormActionType, FormProps } from '@/components/Form';
  import { CollapseContainer } from '@/components/Container';
  import { useMessage } from '@/hooks/web/useMessage';
  import { PageWrapper } from '@/components/Page';
  import { type Nullable } from '@vben/types';

  const schemas: FormSchema[] = [
    {
@@ -166,23 +169,18 @@
    },
  ];

  export default defineComponent({
    components: { BasicForm, CollapseContainer, PageWrapper },
    setup() {
      const formElRef = ref<Nullable<FormActionType>>(null);
      const { createMessage } = useMessage();
      return {
        formElRef,
        schemas,
        handleSubmit: (values: any) => {
          createMessage.success('click search,values:' + JSON.stringify(values));
        },
        setProps(props: FormProps) {
          const formEl = formElRef.value;
          if (!formEl) return;
          formEl.setProps(props);
        },
      };
    },
  });
  const formElRef = ref<Nullable<FormActionType>>(null);
  const { createMessage } = useMessage();

  function handleSubmit(values: any) {
    createMessage.success('click search,values:' + JSON.stringify(values));
  }

  async function setProps(props: FormProps) {
    const formEl = unref(formElRef);
    console.info(formEl);
    if (!formEl) return;
    await nextTick();
    await formEl.setProps(props);
  }
</script>