tabs 选项卡

分组容器是将字段栏位，树，表格使用tabs,layout,card进行分组显示

选项卡

基本用法

• 使用 form.group 分组

<template>
  <dn-page>
    <dn-form ref="formRef" v-bind="formOptions"></dn-form>
  </dn-page>
</template>

<script lang="jsx">
import { ref, defineComponent, onMounted } from "vue";
import { useForm, dn } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();

function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
      fn1: {
        title: "文本框",
        type: "text",
        form: {
          col: { span: 24 }
        }
      },
      fn2: {
        title: "带图标",
        type: "text",
        form: {
          col: { span: 24 },
          component: {
            'prefix-icon': 'search',
            'suffix-icon': 'Calendar',
            clearable: false
          }
        }
      },
      fn3: {
        title: "数字输入",
        type: "number",
        form: {
          col: { span: 24 },
          component: {
            precision: 2,
            step: 0.01
          }
        }
      },
      fn5: {
        title: '',
        type: 'label',
        form: {
          col: { style: 'color:red' },
          props: {
            value: '文字内容文字内容'
          }
        }
      },
      fn4: {
        title: '多行文本',
        type: 'textarea',
        form: {
          col: { span: 24 },
          component: {
            rows: 3
          }
        }
      },
    },
    form: {
      group: {
        groupType: 'tabs',
        tabPosition: "top",
        groups: {
          group1: {
            label: '选项卡1',
            value: 'group1',
            columns: ['fn1', 'fn2', 'fn3'],
            toolbar: {
              title: '工具栏按钮',
              buttons: {
                btn: {
                  text: '按钮',
                  type: 'primary',
                  onClick: (e) => {
                    dn.showMsg({ message: '点击按钮' })
                  }
                }
              }
            }
          },
          group2: {
            label: '选项卡2',
            value: 'group2',
            columns: ['fn4', 'fn5']
          }
        }
      }
    }
  });
}

function initFormOptions() {
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid: 1 };

  return {
    formOptions,
    formRef
  };
}

export default defineComponent({
  setup(props, ctx) {
    return {
      ...initFormOptions()
    }
  }
});
</script>

选项卡分组 API

PropsName	Description	Type	Default
form	表单配置，参考Form配置	json	{}
columns	表单字段	json
└ key	字段名称表单字段类型	json
form	表单配置	json
└ group	组件分组	object
└└ groupType	分组类型	tabs
└└ type	tabs时的风格类型		border-card
└└ tabPosition	标签位置		top
└└ key	分组类型原生组件属性
└└ groups	分组项	json
└└└ key	组key	json
└└└└ label	组标题	string
└└└└ value	组value，同key	string
└└└└ columns	组内字段名称 ["fn1","fn2"]
└└└└ toolbar	工具栏属性	json
└└└└└ title	工具栏Title	string
└└└└└ buttons	按钮	json
└└└└└└ key	按钮Key	json
└└└└└└└ ......	参考按钮属性参考按钮属性
└└└└ children	子组	json
└└└└└ groupType	分组类型	tabs card collapse layout
└└└└└ tabPosition	标签位置		top
└└└└└ type	tabs时的风格类型		border-card
└└└└└ key	分组类型原生组件属性
└└└└└ groups	分组项	json
└└└└└└ key	组key	json
└└└└└└└ label	组标题	string
└└└└└└└ value	组value，同key	string
└└└└└└└ key	分组类型原生组件属性
└└└└└└└ columns	组内字段，父级组columns内的字段