vue ant v-decorator的使用

发布时间:2023年12月25日

由于某个项目用的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) {
文章来源:https://blog.csdn.net/anwenagululu/article/details/132795496
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。