• 表单分组
    • 分组展示
    • 卡片展示

    表单分组

    可以根据输入的内容不同划分不用的分组

    分组展示

    分组 - 图1

    用法普通的form组件分组用法一样，在group中配置结构体即可

    1. <avue-form :option="option" v-model="form" @submit="handleSubmit">
    2.   <template slot="group1Header">
    3.     <h4>自定义表头</h4>
    4.   </template>
    5. </avue-form>
    6. <script>
    7. export default {
    8.   data(){
    9.     return {
    10.        form:{
    11.           text1:'文本1',
    12.           text2:'文本2',
    13.           text3:'文本3',
    14.        },
    15.        option:{
    16.           group:[
    17.             {
    18.               icon:'el-icon-info',
    19.               label: '分组1',
    20.               prop: 'group1',
    21.               column: [{
    22.                 label: '内容1',
    23.                 prop: 'text1',
    24.               }]
    25.             },{
    26.               icon:'el-icon-info',
    27.               label: '分组2',
    28.               prop: 'group2',
    29.               column: [{
    30.                 label: '选项卡2',
    31.                 prop: 'text2',
    32.               }, {
    33.                 label: '选项卡3',
    34.                 prop: 'text3',
    35.               }]
    36.             }
    37.           ]
    38.        }
    39.     }
    40.   },
    41.   methods:{
    42.     handleSubmit(form){
    43.        this.$message.success(JSON.stringify(this.form))
    44.     }
    45.   }
    46. }
    47. </script>

    卡片展示

    分组 - 图2

    card组件可开启卡片分组效果，默认为false

    1. <avue-form :option="option1" v-model="form" @submit="handleSubmit"></avue-form>
    2. <script>
    3. export default {
    4.   data(){
    5.     return {
    6.        form:{
    7.           text1:'文本1',
    8.           text2:'文本2',
    9.           text3:'文本3',
    10.        },
    11.        option1:{
    12.           card:true,
    13.           group:[
    14.             {
    15.               icon:'el-icon-info',
    16.               label: '分组1',
    17.               prop: 'group1',
    18.               column: [{
    19.                 label: '内容1',
    20.                 prop: 'text1',
    21.               }]
    22.             },{
    23.               icon:'el-icon-info',
    24.               label: '分组2',
    25.               prop: 'group2',
    26.               column: [{
    27.                 label: '选项卡2',
    28.                 prop: 'text2',
    29.               }, {
    30.                 label: '选项卡3',
    31.                 prop: 'text3',
    32.               }]
    33.             }
    34.           ]
    35.        }
    36.     }
    37.   },
    38.   methods:{
    39.     handleSubmit(form){
    40.        this.$message.success(JSON.stringify(this.form))
    41.     }
    42.   }
    43. }
    44. </script>