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

這樣就完成切換啦！