表单分组

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

分组展示

分组 - 图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>