表单项插槽

如果内置组件满足不了您的需求，并且您只想使用一次控件，那么您可以使用表单项插槽来满足您的需求，如果您大量使用了该组件，我们还是建议您使用自定义控件

使用方式

提交

<template>
  <div>
    <v-form-create :formConfig="formConfig" :formData="formData" v-model="fApi">
      <template #usernameSlot="{ formModel, field, record }">
        <a-input
          type="text"
          placeholder="我是插槽渲染的内容"
          v-model="formModel[field]"
          v-on="record"
          v-bind="record.props"
        />
      </template>
    </v-form-create>
    <a-button @click="submit">提交</a-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fApi: {},
      formData: {},
      formConfig: {
        formItems: [
          {
            type: 'slot',
            label: '用户名',
            field: 'username',
            span: 24,
            props: {
              slotName: 'usernameSlot'
            }
          }
        ],
        config: {
          layout: 'horizontal',
          labelLayout: 'flex',
          labelWidth: 100,
          labelCol: {},
          wrapperCol: {}
        }
      }
    }
  },
  methods: {
    async submit() {
      const data = await this.fApi.submit()
      alert(JSON.stringify(data, null, '\t'))
    }
  }
}
</script>

显示代码 复制代码 复制代码

注意事项

注意，使用插槽时，我们不会把事件监听和属性绑定到组件中，如果您要使用事件监听，需要您手动操作：

<template>
  <v-form-create :formConfig="formConfig" :formData="formData" v-model="fApi">
    <template #usernameSlot="{ formModel, field, record }">
      <a-input
        type="text"
        placeholder="我是插槽渲染的内容"
        v-model="formModel[field]"
        v-on="record.on"
        v-bind="record.props"
      />
    </template>
  </v-form-create>
</template>

插槽作用域

属性	说明	类型
formModel	表单绑定 formData 的实例，您可以理解为 formModel 等于 formData，我们也只是为了区分名称	Object
field	当前插槽表单项绑定的字段	string
record	当前表单项 formItem 对象	Object