TableForm

组件描述组件描述组件描述组件描述组件描述组件描述。

基础用法

基础用法基础用法基础用法基础用法基础用法基础用法。

basic.vue

<template>
  <div>
    <p>value: {{ value.Fgxzm4z37z78e4c }}</p>
    <form-create v-model:api="fApi" v-model="value" :rule="rule" :option="options" />
  </div>
</template>

<script>
// import formCreate from '@form-create/element-ui'
export default {
  components: {
    // formCreate: formCreate.$form(),
  },
  data() {
    return {
      fApi: {},
      value: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        },
      },
      rule: [
        // {
        //   type: 'dk-table-form',
        //   field: 'tableForm',
        //   value: [
        //     { field1: '小明', field2: 'sss' },
        //     { field1: '大白', field2: 'sss' },
        //     // { field1: '大白2', field2: 'ss2s' },
        //   ],
        //   props: {
        //     title: 'Group数据',
        //     defaultValue: { field1: 'field1', field2: 'field2' },
        //     rule: [
        //       {
        //         type: 'input',
        //         field: 'field1',
        //         title: '名称',
        //         effect: { help: 'test' },
        //       },
        //       { type: 'input', field: 'field2', title: '说明' },
        //     ],
        //   },
        // },

        {
          type: 'DkTableForm',
          field: 'Fgxzm4z37z78e4c',
          title: '表格表单',
          info: '',
          props: {
            columns: [
              {
                label: '自定义名称',
                style: {
                  width: 'auto',
                },
                rule: [
                  {
                    type: 'input',
                    field: 'F8u0m4z37w85e1c',
                    title: '输入框',
                    info: '',
                    $help: '',
                    $required: false,
                    _fc_id: 'id_Fqmdm4z37w85e2c',
                    name: 'ref_Fa51m4z37w85e3c',
                    display: true,
                    hidden: false,
                    _fc_drag_tag: 'input',
                    suffix: {
                      type: 'p',
                      children: [''],
                      class: 'form-help',
                    },
                  },
                ],
              },
              {
                label: '自定义名称',
                style: {
                  width: 'auto',
                },
                rule: [
                  {
                    type: 'input',
                    field: 'F38lm4z385o7ebc',
                    title: '输入框',
                    info: '',
                    $help: '',
                    $required: false,
                    _fc_id: 'id_Fe3hm4z385o7ecc',
                    name: 'ref_Fc6nm4z385o7edc',
                    display: true,
                    hidden: false,
                    _fc_drag_tag: 'input',
                    suffix: {
                      type: 'p',
                      children: [''],
                      class: 'form-help',
                    },
                  },
                ],
              },
            ],
          },
          _fc_id: 'id_Fbnnm4z37z78e5c',
          name: 'ref_Fipam4z37z78e6c',
          display: true,
          hidden: false,
          _fc_drag_tag: 'tableForm',
        },
      ],
    }
  },
}
</script>

组件配置

TableForm Props

属性	说明	类型	默认值
type	参数类型	string	-

TableForm Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

TableForm Slots

插槽名	说明
default	自定义默认内容

类型定义

组件导出以下类型定义

import type { TableFormProps } from '@vipl520/dk-ui'

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值
--dk-table-form-background	-