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']
          },
          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"]
└└└└ 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内的字段