SOURCE

# BaseForm 表格

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

## 基础用法

:::demo

```vue
<template>
  <el-input
    v-model="formData.productId"
    maxlength="10"
    placeholder="Please input"
    show-word-limit
    type="text"
    clearable
  />
  <BaseForm inline v-model="formData" :data="formList" />
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
export default defineComponent({
  setup() {
    const formData = reactive({
      productId: '',
      productName: '吃泡面吃',
      productAttr: '',
      customizeDepartmentId: '',
      industryClass: '',
      productType: [],
      productDesc: '',
      uploadMode: '1',
      periodNum: '',
      periodNumStart: '2021/01/01',
      periodNumEnd: '2023/12/22',
      fileId: '',
      departmentName: '',
      departmentEmail: '',
      creatorName: '',
      submitNum: '',
      preSalesNum: '',
      afterSalesNum: ''
    })

    const formList = ref([
      {
        sortNo: 4,
        label: '产品名称',
        field: 'productName',
        componentProps: {
          placeholder: '请输入',
          maxlength: 20,
          showWordLimit: true,
          props: {
            trim: true
          }
        },
        onChange: (val, params) => {
          params.model.productDesc = '11' + Math.random()
          if (params.model.productName === '111') {
            formList.value[1].label = '新描述'
            formList.value[1].componentProps.showWordLimit = false
          } else {
            formList.value[1].label = '描述'
            formList.value[1].componentProps.showWordLimit = true
          }
          console.error('onChange', val, params, formData)
        },
        required: true,
        rules: [{ message: '请输入产品名称' }]
      },
      {
        sortNo: 1,
        label: '描述',
        field: 'productDesc',
        hidden: val => {
          return val.model.productName === '1' || val.model.departmentName === '111'
        }, // 也支持直接布尔值
        componentProps: {
          placeholder: '请输入',
          maxlength: 100,
          showWordLimit: true,
          props: {
            trim: true
          }
        },
        required: true,
        rules: [{ message: '请输入描述' }]
      },
      {
        sortNo: 2,
        label: '产品接口人',
        field: 'creatorName',
        componentProps: {
          disabled: true
        },
        required: true,
        rules: [{ message: '请输入产品接口人' }]
      },
      {
        sortNo: 3,
        label: '接口人电话接口人电话接口人电话',
        field: 'submitNum',
        required: true,
        componentProps: {
          disabled: true
        },
        description: '描述xxxxxx',
        rules: [{ message: '请输入接口人电话接口人电话接口人电话' }]
      },
      {
        sortNo: 5,
        label: '下拉',
        field: 'departmentName',
        required: true,
        componentName: 'BaseSelect',
        componentProps: {
          options: [
            {
              label: '下拉选项1',
              value: '111'
            },
            {
              label: '下拉选项2',
              value: '222'
            }
          ]
        },
        onChange: (val, params) => {
          if (val === '222') {
            formData.productDesc = params.model.productDesc ? '' : '111'
          }
        },
        rules: [{ message: '请选择departmentName' }]
      }
    ])
    onMounted(() => {
      setTimeout(() => {
        formData.productName = '1'
      }, 1000)
    })
    return {
      formData,
      formList
    }
  }
})
</script>
```

:::

## 组件 API

| 属性名 | 说明 | 类型                    | 可选值 | 默认值 |
| :----- | :--- | :---------------------- | :----- | :----- |
| xxx    | xxx  | string                  | --     | /      |
| xxx    | xxx  | Array<[xxx](#xxx-属性)> | --     | []     |

## xxx 属性

| 属性名 | 说明          | 类型   | 可选值 | 默认值 |
| :----- | :------------ | :----- | :----- | :----- |
| xxx    | xxx（必传项） | string | --     |        |

## 组件 插槽

| 属性名  | 说明           | 子标签 |
| :------ | :------------- | :----- |
| default | 默认内容       | --     |
| item    | 自定义子项内容 | --     |

## 组件 方法

## 组件 事件

## 组件 对外暴露的变量

## 组件 对外暴露的方法