FormDrawer 抽屉表单

简介

FormDrawer 是 ElDrawer 组件的高阶组件，拥有相同的接口，用于配合 Form 组件使用，Form 表单的按钮会移到 FormDrawer 的底部插槽位置。

代码演示

基础演示

<template>
  <el-button type="primary" @click="visible = true">新建表单</el-button>

  <co-form-drawer v-model="visible" title="创建表单">
    <co-form :model="formModel" label-position="top" :submit="onSubmit">
      <co-form-group>
        <co-form-item
          v-model="formModel.name"
          prop="name"
          label="签约客户名称"
          field-type="input"
          width="md"
          :rules="[{ required: true }]"
        />
        <co-form-item
          v-model="formModel.company"
          prop="company"
          label="我方公司名称"
          field-type="input"
          width="md"
        />
      </co-form-group>
      <co-form-group>
        <co-form-item
          v-model="formModel.contract.name"
          prop="contract.name"
          label="合同名称"
          field-type="input"
          width="md"
        />
        <co-form-item
          v-model="formModel.contract.createTime"
          prop="contract.createTime"
          label="合同生效时间"
          field-type="daterange"
          width="md"
        />
      </co-form-group>
      <co-form-group>
        <co-form-item
          v-model="formModel.useMode"
          prop="useMode"
          label="合同约定生效方式"
          field-type="select"
          :field-props="{
            options: [
              {
                value: 'chapter',
                label: '盖章后生效',
              },
            ],
          }"
          width="xs"
          readonly
        />
        <co-form-item
          v-model="formModel.unusedMode"
          prop="unusedMode"
          label="合同约定失效方式"
          field-type="select"
          :field-props="{
            options: [
              {
                value: 'time',
                label: '履行完终止',
              },
            ],
          }"
          width="xs"
        />
      </co-form-group>
      <co-form-item
        v-model="formModel.id"
        prop="id"
        label="主合同编号"
        field-type="input"
        width="sm"
      />
      <co-form-item
        v-model="formModel.project"
        prop="project"
        label="项目名称"
        field-type="input"
        disabled
        width="md"
      />
      <co-form-item
        v-model="formModel.mangerName"
        prop="mangerName"
        label="商务经理"
        field-type="input"
        disabled
        width="xs"
      />
    </co-form>
  </co-form-drawer>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

const visible = ref(false);

const formModel = reactive({
  name: '蚂蚁设计有限公司',
  company: undefined,
  contract: {
    name: undefined,
    createTime: undefined,
  },
  useMode: 'chapter',
  unusedMode: undefined,
  id: undefined,
  project: 'xxxx项目',
  mangerName: '启途',
});

const onSubmit = async () => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  ElMessage.success('提交成功');
};
</script>

API

FormDrawerProps

继承 element-plus 的 Drawer Attributes，并添加以下属性：

属性	描述	类型	默认值
confirm-text	确定按钮的文案	string	'确定'
cancel-text	取消按钮的文案	string	'取消'
confirm-props	确定按钮的属性	ButtonProps	-
cancel-props	取消按钮的属性	ButtonProps	-
hide-confirm	是否隐藏确定按钮	boolean	false
hide-cancel	是否隐藏取消按钮	boolean	false

FormDrawerSlots

继承 element-plus 的 Drawer Slots，并添加以下插槽。

插槽	描述	属性
button	自定义表单按钮	{ submitting: boolean; confirm: () => any | Promise<any>; cancel: () => any;}

FormDrawerEmits

继承 element-plus 的 Drawer Events。

FormDrawerExpose

继承 element-plus 的 Drawer Exposes。