# 分组展示

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

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

<avue-form :option="option" v-model="form" @submit="handleSubmit" @tab-click="handleTabClick">
  <template slot="group1Header" slot-scope="{column}">
    <svg aria-hidden="true" style="width:30px;height:30px;">
      <use xlink:href="#icon-duanxinguanli"></use>
    </svg>
     {{column.label}}
  </template>
   <template slot="text3" slot-scope="{}">
    <el-input placeholder="自定义" v-model="form.text3"></el-input>
  </template>
</avue-form>
<script>
export default {
  data(){
    return {
       form:{
          text:'文本',
          text1:'文本1',
          text2:'文本2',
          text3:'文本3',
       },
       option:{
          column:[{
                label: '内容',
                prop: 'text',
          }],
          group:[
            {
              icon:'el-icon-info',
              label: '分组1',
              collapse:false,
              prop: 'group1',
              column: [{
                label: '内容1',
                prop: 'text1',
              }]
            },{
              icon:'el-icon-info',
              label: '分组2',
              arrow:false,
              prop: 'group2',
              column: [{
                label: '选项卡2',
                prop: 'text2',
              }, {
                label: '选项卡3',
                prop: 'text3',
              }]
            }
          ]
       }
    }
  },
  methods:{
    handleSubmit(form){
       this.$message.success(JSON.stringify(this.form))
    },
    handleTabClick(event){
      this.$message.success(event);
    }
  }
}
</script>

Expand Copy
Last Updated: 10/11/2021, 10:40:32 AM