tmagic-editor/docs/form-config/layout.md

# 布局

## 配置类型

::: details 查看 ContainerCommonConfig / RowConfig / TabConfig / TabPaneConfig / FieldsetConfig / PanelConfig / StepConfig / FlexLayoutConfig / GroupListConfig / TableConfig / TableColumnConfig / TableGroupListCommonConfig 配置类型定义
<<< @/../packages/form-schema/src/base.ts#ContainerCommonConfig{ts}

<<< @/../packages/form-schema/src/base.ts#RowConfig{ts}

<<< @/../packages/form-schema/src/base.ts#TabConfig{ts}

<<< @/../packages/form-schema/src/base.ts#TabPaneConfig{ts}

<<< @/../packages/form-schema/src/base.ts#FieldsetConfig{ts}

<<< @/../packages/form-schema/src/base.ts#PanelConfig{ts}

<<< @/../packages/form-schema/src/base.ts#StepConfig{ts}

<<< @/../packages/form-schema/src/base.ts#FlexLayoutConfig{ts}

<<< @/../packages/form-schema/src/base.ts#GroupListConfig{ts}

<<< @/../packages/form-schema/src/base.ts#TableConfig{ts}

<<< @/../packages/form-schema/src/base.ts#TableColumnConfig{ts}

<<< @/../packages/form-schema/src/base.ts#TableGroupListCommonConfig{ts}

<<< @/../packages/form-schema/src/base.ts#FormItem{ts}

:::

## 基础用法

<demo-block type="form" :config="[{
  name: 'text',
  text: '配置1',
}, {
  name: 'text2',
  text: '配置2',
}, {
  name: 'text3',
  text: '配置3',
}]"></demo-block>

## 行内布局

可以通过配置span，来指定行内的配置项占用多少位置，一行为24，例如一行要显示三个配置则 span 可以配置 8；四个则为 6。默认会自动调节在一行中显示。

<demo-block type="form" :config="[{
  type: 'row',
  labelWidth: '100px',
  span: 8,
  items: [{
    name: 'text',
    text: '配置1',
  }, {
    name: 'text2',
    text: '配置2',
  }, {
    name: 'text3',
    text: '配置3',
  }]
}, {
  type: 'row',
  span: 12,
  labelWidth: '100px',
  items: [{
    name: 'text4',
    text: '配置1',
  }, {
    name: 'text5',
    text: '配置2',
  }, {
    name: 'text6',
    text: '配置3',
  }]
}]"></demo-block>

## 混合布局

<demo-block type="form" :config="[{
  name: 'text0',
  labelWidth: '100px',
  text: '配置0',
}, {
  type: 'row',
  labelWidth: '100px',
  items: [{
    name: 'text',
    text: '配置1',
  }, {
    name: 'text2',
    text: '配置2',
  }, {
    name: 'text3',
    text: '配置3',
  }]
}]"></demo-block>

## 对象容器

### Object

<demo-block type="form" :config="[{
  name: 'data',
  items: [{
    name: 'text2',
    text: '配置2',
  }, {
    name: 'text3',
    text: '配置3',
  }]
}]"></demo-block>

### fieldset

<demo-block type="form" :config="[{
  type: 'fieldset',
  labelWidth: '100px',
  legend: 'fieldset',
  items: [{
    name: 'text',
    text: '配置1',
  }, {
    type: 'row',
    items: [{
      name: 'text2',
      text: '配置2',
    }, {
      name: 'text3',
      text: '配置3',
    }]
  }]
}]"></demo-block>

`legend` 除了支持字符串，也支持函数，函数返回值作为标题展示，可根据表单数据动态生成：

<demo-block type="form" :config="[{
  type: 'fieldset',
  labelWidth: '100px',
  legend: (mForm, { formValue }) => `当前值：${formValue.text || '空'}`,
  items: [{
    name: 'text',
    text: '配置1',
  }]
}]"></demo-block>

### panel

<demo-block type="form" :config="[{
  type: 'panel',
  title: 'panel',
  items: [{
    name: 'text',
    text: '配置1',
  }, {
    type: 'row',
    items: [{
      name: 'text2',
      text: '配置2',
    }, {
      name: 'text3',
      text: '配置3',
    }]
  }]
}]"></demo-block>

### tabs

<demo-block type="form" :config="[{
  type: 'tab',
  items: [{
    title: 'tab1',
    items: [{
      name: 'text',
      text: '配置1',
    }]
  }, {
    title: 'tab2',
    items: [{
      name: 'text2',
      text: '配置2',
    }, {
      name: 'text3',
      text: '配置3',
    }]
  }]
}]"></demo-block>

## 数组容器

### groupList

<demo-block type="form" :config="[{
  type: 'groupList',
  name: 'group',
  items: [{
    name: 'text',
    text: '配置1',
  }, {
    type: 'row',
    items: [{
      name: 'text2',
      text: '配置2',
    }, {
      name: 'text3',
      text: '配置3',
    }]
  }]
}]"></demo-block>

### table

<demo-block type="form" :config="[{
  type: 'table',
  name: 'table',
  items: [{
    name: 'text',
    label: '配置1',
  }]
}]"></demo-block>

### step

<demo-block type="form" :config="[{
  type: 'step',
  items: [{
    title: '步骤1',
    items: [{
      name: 'text',
      text: '配置1',
    }]
  }, {
    title: '步骤2',
    items: [{
      name: 'text2',
      text: '配置2',
    }]
  }]
}]"></demo-block>

### flex-layout

<demo-block type="form" :config="[{
  type: 'flex-layout',
  gap: '20px',
  items: [{
    name: 'text',
    text: '配置1',
    span: 12
  }, {
    name: 'text2',
    text: '配置2',
    span: 12
  }]
}]"></demo-block>