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;
            },

这样就完成切换啦!

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值