avue切换显示分组表单

如下图所示，需点击个人和机构，切换显示下面不同的表单页面。

本人用的是avue框架写的，在类型的列上设置formslot：true

然后对两种表单控件进行分组group[{…},{…}]，分组如下图：

在vue文件中自定义对应卡槽按钮组，el-radio-group按钮组定义change改变事件方法：

<template slot-scope="scope" slot="hylxForm">
                  <el-radio-group v-model="radio" @change="hylxTabShow" >
                    <el-radio-button id="hylx_gr" label="1" >个人</el-radio-button>
                    <el-radio-button id="hylx_jg" label="2">机构</el-radio-button>
                  </el-radio-group>
</template>
           

data中：

radio: '1',

然后就是js按钮事件了，value形参接收到的就是点击该radio按钮的label值，所以可以用value和label值比较做相应的动作。

hylxTabShow:function (value) {
              this.tableOption.group[0].display=1==value;
              this.tableOption.group[1].display=2==value;
              this.selectpage=value;
            },
           

这样就完成切换啦！