c-form 自定义类型

自定义类型

表单项 type 除了支持默认组件之外，也支持自定义 VNode

浏览器不支持，请手动复制 custom-type.vue

<template>
  <div>
    {{ data }}
    <c-form v-model="data" :option="option" />
  </div>
</template>
<!-- 建议使用 lang=tsx 获得语法简写，无需使用繁杂的h函数嵌套 -->
<script setup lang="tsx">
import type { FormOption } from 'carton-ui'
import { Input } from 'tdesign-vue-next'
import { ref } from 'vue'

type User = {
  fullName?: string
  tel?: number
  range: string[]
}
const data = ref()

const option: FormOption<User> = {
  columns: [
    {
      label: '姓名',
      key: 'fullName',
    },
    {
      label: '电话',
      key: 'tel',
      type: 'number',
    },
    {
      label: '自定义组件',
      key: 'range',
      defaultValue: ['', ''],
      // 自定义组件
      type: data => {
        return (
          <div style="display:flex;">
            <Input
              value={data.range[0]}
              onChange={val => (data.range[0] = val.toString())}
            ></Input>
            <span>~</span>
            <Input
              value={data.range[1]}
              onChange={val => (data.range[1] = val.toString())}
            ></Input>
          </div>
        )
      },
    },
  ],
}
</script>

完全自定义渲染

使用 render 完全自定义渲染，例如实现分组表单

浏览器不支持，请手动复制 custom-render.vue

<template>
  <c-form :option="option" />
</template>
<!-- 建议使用 lang=tsx 获得语法简写，无需使用繁杂的h函数嵌套 -->
<script setup lang="tsx">
import type { FormOption } from 'carton-ui'

const option: FormOption = {
  props: {
    labelAlign: 'left',
    labelWidth: 60,
  },
  onSubmit: async data => {
    await new Promise<void>(resolve => setTimeout(() => resolve(), 2500))
  },

  columns: [
    {
      render: data => <div class="title">基础信息 {data.fullName}</div>,
    },
    {
      label: '姓名',
      key: 'fullName',
    },
    {
      label: '电话',
      key: 'tel',
      type: 'number',
    },
    {
      render: () => <div class="title">更多信息</div>,
    },
    {
      label: '身份证',
      key: 'idCard',
    },
    {
      label: '银行卡',
      key: 'bankCard',
    },
  ],
}
</script>
<style>
.title {
  padding-top: 8px;
  padding-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
}
</style>

组件配置

FormColumn Props

属性	说明	类型	默认值
type	类型函数	(data: AnyObject)=>VNode	-
render	渲染函数	(data: AnyObject)=>VNode	-