card 卡片分组

card

基本用法

<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:'card',
        groups:{
          group1:{
            label:'card1',
            value:'group1',
            columns:['fn1','fn2','fn3']
          },
          group2:{
            label:'card12',
            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>

左右布局

<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',span:24},
          props:{
            value:'文字内容文字内容'
          }
        }        
      },
      fn4:{
        title:'多行文本',
        type:'textarea',
        form:{
          col:{span:24},    
          component:{
            rows:3
          }
        }
      },
      fn7:{
        title:'',
        type:'label',    
        form:{          
          col:{style:'color:red'},
          props:{
              type:'nolabel',
              value:'左边card'
          }
        }        
      },
    },
    form:{
      group:{
        groupType:'card',
        groups:{
          group1:{
            col:{span:8},
            label:'card1',
            value:'group1',
            columns:['fn7']
          },
          group2:{
            col:{span:16},
            label:'card2',
            value:'group2',
            columns:['fn1','fn2','fn3','fn4','fn5']
          }
        }
      }
    }
  });
}

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

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

card分组 API

PropsName	Description	Type	Default
form	表单配置，参考Form配置	json	{}
columns	表单字段	json
└ key	字段名称表单字段类型	json
form	表单配置	json
└ group	组件分组	object
└└ groupType	分组类型	card
└└ key	分组类型原生组件属性
└└ groups	分组项	json
└└└ key	组key	json
└└└└ col	分组col配置	json
└└└└ label	组标题	string
└└└└ value	组value，同key	string
└└└└ columns	组内字段名称 ["fn1","fn2"]
└└└└ children	子组	json
└└└└└ groupType	分组类型	tabs card collapse layout
└└└└└ key	分组类型原生组件属性
└└└└└ groups	分组项	json
└└└└└└ key	组key	json
└└└└└└└ col	分组col配置	json
└└└└└└└ label	组标题	string
└└└└└└└ value	组value，同key	string
└└└└└└└ key	分组类型原生组件属性
└└└└└└└ columns	组内字段，父级组columns内的字段