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="

米泽玄師

3725人浏览 · 2020-09-04 09:18:56

米泽玄師 · 2020-09-04 09:18:56 发布

<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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^