1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
  <div>
  <p>生命周期模型</p>
  <el-button @click="tabs=!tabs">转化</el-button><br /><br />
  <avue-form @tab-click="handleTabClick" :option="option" v-model="form" @submit="handleSubmit">
    <template slot="group1Header">
      <h4>自定义表头</h4>
    </template>
  </avue-form>
  </div>
</template>
 
<script>
export default {
  name: "cycle.vue",
  data(){
    return{
      tabs:true,
      form:{
        text:'文本',
        text1:'文本1',
        text2:'文本2',
        text3:'文本3',
      },
    }
  },
  computed:{
    option(){
      return{
        tabs:this.tabs,
        tabsActive:2,
        column: [{
          label: '内容1',
          prop: 'text1',
        }],
        group:[
          {
            icon:'el-icon-info',
            label: '分组1',
            prop: 'group1',
            column: [{
              label: '内容1',
              prop: 'text1',
            }]
          },{
            icon:'el-icon-info',
            label: '分组2',
            prop: 'group2',
            column: [{
              label: '选项卡2',
              prop: 'text2',
            }, {
              label: '选项卡3',
              prop: 'text3',
            }]
          }
        ]
      }
    }
  }
}
</script>
 
<style scoped>
 
</style>