vue 取到v-decorator的值,并使用v-if渲染表单其他组件

<a-form :form="form">
  <a-form-item
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
    label="商品类型">
    <j-dict-select-tag v-decorator="['type', validatorRules.type]" placeholder="请选择商品类型" dictCode="product_type"
                       :trigger-change="true" @change="getType"/>
<a-row style="margin:0px 0px 20px 0px" v-if="productType == 'pro'">
  <a-col :span="16" :offset="5">
    <a-button type="primary" @click="showProductModal">
      选择商品
    </a-button>
    <!-- 商品分页选择表单区域 -->
    <product-type-modal ref="modalForm" @ok="modalFormOk" :app-id="appId"></product-type-modal>
  </a-col>
</a-row>
<a-row style="margin:0px 0px 20px 0px" v-else-if="productType != ''&& productType!='pro' && productType != undefined">
  <a-col :span="16" :offset="5">
    <a-button type="primary" @click="showServiceModal">
      选择业务包
    </a-button>
    <!-- 业务包分页选择表单区域 -->
    <service-type-modal ref="modalServiceForm" @ok="modalServiceFormOk"></service-type-modal>
  </a-col>
</a-row>
在方法里,

//当切换商品类型的时候,得到他的值
getType() {
    this.$nextTick(() => {
        console.log('form:{}', this.form.getFieldValue('type'));
        this.productType = this.form.getFieldValue('type')
    });
},

 

posted @ 2021-10-30 14:24  夏冬青  阅读(868)  评论(0编辑  收藏  举报