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

最新推荐文章于 2025-03-18 09:41:17 发布

原创最新推荐文章于 2025-03-18 09:41:17 发布 · 3.9k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文详细解析了一个基于Ant Design的商品类型选择组件实现。通过动态展示不同类型的商品或业务包选择界面，该组件支持商品类型的切换，并根据所选类型显示相应的商品或业务包选择按钮。文章深入探讨了组件的代码结构、数据绑定及事件处理机制。

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

标签

#vue