禁用表单

本文介绍如何通过 disabled 配置项禁用表单中所有的表单组件。

使用 disabled 配置项禁用表单

disabled 配置项可以在表单配置中设置为 true，以禁用表单中的所有组件。禁用后，表单组件将无法进行用户输入或交互。

field1

field2

field3

复制成功!

<template>
  <div>
    <form-create :disabled="disabled" :rule="rule" v-model:api="fApi" :option="options"/>
    <ElButton @click="onClick">禁用表单</ElButton>
  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled: false,
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'field1',
          title: 'field1',
        },
        {
          type: 'input',
          field: 'field2',
          title: 'field2',
        },
        {
          type: 'input',
          field: 'field3',
          title: 'field3',
        },
      ]
    }
  },
  methods: {
    onClick() {
      this.disabled = !this.disabled;
    },
  }
}
</script>

禁用表单字段

除了禁用整个表单，你还可以单独禁用某些表单字段。可以在每个字段的配置中设置 disabled 属性。

<template>
  <FormCreate :rule="rule" />
</template>


<script setup>
import { ref } from 'vue';


const rule = ref([
  {
    type: 'input',
    field: 'username',
    title: 'Username',
    props: { disabled: true }
  },
  {
    type: 'input',
    field: 'email',
    title: 'Email'
  }
]);
</script>