vue ant v-decorator的使用

由于某个项目用的v-decorator,所以今天记录一下v-decorato

1.template中

        <a-form-item label="推广人类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            @change="getType"
            placeholder="请选择推广人类型"
            v-decorator="['promotionType', validatorRules.promotionType]"
          >
            <a-select-option :value="1">11</a-select-option>
            <a-select-option :value="2">222</a-select-option>
            <a-select-option :value="3">33</a-select-option>
          </a-select>
        </a-form-item>

data中创建表单设置校验

validatorRules: {
        name: {
          rules: [
            {
              required: true,
              message: "请输入姓名!",
            },
          ],
        },
}
form: this.$form.createForm(this),

2.取值(想要在表单中取到值并且使用v-if渲染表单其他属性

getType() {
      this.$nextTick(() => {
        this.promotionType = this.form.getFieldValue("promotionType");
      });
    },

3.赋值

this.$nextTick(() => {
  this.form.setFieldsValue({promotionType: '设置值'});
});

4.清空表单数据

this.form.resetFields();

5.触发表单验证 提交方法

this.form.validateFields((err, values) => {
  if (!err) {
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值