ant-design-vue/components/form/demo/disabled.vue

<docs>
---
order: 4
title:
  zh-CN: 表单禁用
  en-US: Form disabled
---

## zh-CN

设置表单组件禁用，仅对 antd 组件有效。

## en-US

Set component disabled, only works for antd components.
</docs>

<template>
  <a-checkbox :checked="componentDisabled" @change="e => (componentDisabled = e.target.checked)">
    Form disabled
  </a-checkbox>
  <a-form
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    layout="horizontal"
    :disabled="componentDisabled"
    style="max-width: 600px"
  >
    <a-form-item label="Checkbox">
      <a-checkbox>checkbox</a-checkbox>
    </a-form-item>
    <a-form-item label="Radio">
      <a-radio-group v-model:value="radioValue">
        <a-radio value="apple">Apple</a-radio>
        <a-radio value="pear">Pear</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Input">
      <a-input />
    </a-form-item>
    <a-form-item label="Select">
      <a-select>
        <a-select-option value="demo">Demo</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="TreeSelect">
      <a-tree-select :tree-data="treeData" />
    </a-form-item>
    <a-form-item label="Cascader">
      <a-cascader :options="options" />
    </a-form-item>
    <a-form-item label="DatePicker">
      <a-date-picker />
    </a-form-item>
    <a-form-item label="RangePicker">
      <a-range-picker />
    </a-form-item>
    <a-form-item label="InputNumber">
      <a-input-number />
    </a-form-item>
    <a-form-item label="TextArea">
      <a-textarea :rows="4" />
    </a-form-item>
    <a-form-item label="Switch">
      <a-switch v-model:checked="checked" />
    </a-form-item>
    <a-form-item label="Upload">
      <a-upload action="/upload.do" list-type="picture-card">
        <div>
          <PlusOutlined />
          <div style="margin-top: 8px">Upload</div>
        </div>
      </a-upload>
    </a-form-item>
    <a-form-item label="Button">
      <a-button>Button</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import type { TreeSelectProps, CascaderProps } from 'ant-design-vue';

const componentDisabled = ref(true);
const labelCol = { style: { width: '150px' } };
const wrapperCol = { span: 14 };
const radioValue = ref('apple');
const treeData = reactive<TreeSelectProps['treeData']>([
  { title: 'Light', value: 'light', children: [{ title: 'Bamboo', value: 'bamboo' }] },
]);
const options = reactive<CascaderProps['options']>([
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
      },
    ],
  },
]);
const checked = ref(false);
</script>