表单选项卡

可以根据输入的内容划分不用的选项卡，集合tabs组件使用

选项卡

选项卡 - 图1

集成了对form组件的封装，只需要在option中没一个选项卡column中配置option的form组件结构体即可，当然你觉的如果这个结构体太庞大的话，可以如下例子采用分组引入js，提交时候submit中返回当前选项卡的内容，如果你想获取全部选项卡对象，则给组件加一个v-model

  1. <avue-tabs :option="option" v-model="form" @submit="handleSubmit"></avue-tabs>
  2. <script>
  3. const tab1Form ={
  4.   column:[{
  5.     label:'内容1',
  6.     prop:'text1'
  7.   }]
  8. }
  9. const tab2Form ={
  10.   column:[{
  11.     label:'内容2',
  12.     prop:'text2'
  13.   }]
  14. }
  15. const tab3Form ={
  16.   column:[{
  17.     label:'内容3',
  18.     prop:'text3'
  19.   }]
  20. }
  21. export default {
  22.   data(){
  23.     return {
  24.         form:{},
  25.         option:{
  26.           column: [{
  27.             icon:'el-icon-info',
  28.             label: '选项卡1',
  29.             prop: 'tab1',
  30.             option:tab1Form,
  31.           }, {
  32.             icon:'el-icon-warning',
  33.             label: '选项卡2',
  34.             prop: 'tab2',
  35.             option:tab2Form,
  36.           }, {
  37.             icon:'el-icon-question',
  38.             label: '选项卡3',
  39.             prop: 'tab3',
  40.             option:tab3Form,
  41.           }]
  42.         }
  43.     }
  44.   },
  45.   methods:{
  46.     handleSubmit(form){
  47.       this.$message.success(JSON.stringify(form))
  48.     }
  49.   }
  50. }
  51. </script>

选项卡分组

选项卡 - 图2

按照form的分组结构配置每一个选项卡即可

  1. <avue-tabs :option="option0" v-model="form" @submit="handleSubmit"></avue-tabs>
  2. <script>
  3. const tab4Form ={
  4.   group:[
  5.     {
  6.       icon:'el-icon-info',
  7.       label: '分组1',
  8.       column:[{
  9.         label:'内容1',
  10.         prop:'text1'
  11.       }]
  12.     },
  13.     {
  14.       icon:'el-icon-info',
  15.       label: '分组2',
  16.       column:[{
  17.         label:'内容2',
  18.         prop:'text2'
  19.       }]
  20.     }
  21.   ]
  22. }
  23. const tab5Form ={
  24.   group:[
  25.     {
  26.       icon:'el-icon-info',
  27.       label: '分组3',
  28.       column:[{
  29.         label:'内容3',
  30.         prop:'text3'
  31.       }]
  32.     },{
  33.       icon:'el-icon-info',
  34.       label: '分组4',
  35.       column:[{
  36.         label:'内容4',
  37.         prop:'text4'
  38.       }]
  39.     }
  40.   ]
  41. }
  42. export default {
  43.   data(){
  44.     return {
  45.         form:{},
  46.         option0:{
  47.           column: [{
  48.             icon:'el-icon-info',
  49.             label: '选项卡1',
  50.             prop: 'tab1',
  51.             option:tab4Form,
  52.           }, {
  53.             icon:'el-icon-warning',
  54.             label: '选项卡2',
  55.             prop: 'tab2',
  56.             option:tab5Form,
  57.           }]
  58.         }
  59.     }
  60.   },
  61.   methods:{
  62.     handleSubmit(form){
  63.       this.$message.success(JSON.stringify(form))
  64.     }
  65.   }
  66. }
  67. </script>