{"id":15,"date":"2025-06-30T19:11:05","date_gmt":"2025-06-30T11:11:05","guid":{"rendered":"https:\/\/www.mxcst.com\/?p=15"},"modified":"2025-06-30T19:11:05","modified_gmt":"2025-06-30T11:11:05","slug":"ant-design-vue-%e5%ae%9e%e7%8e%b0%e5%8a%a8%e6%80%81%e8%a1%a8%e5%8d%95%e5%8f%8a%e9%aa%8c%e8%af%81","status":"publish","type":"post","link":"https:\/\/www.mxcst.com\/?p=15","title":{"rendered":"Ant design Vue \u5b9e\u73b0\u52a8\u6001\u8868\u5355\u53ca\u9a8c\u8bc1"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;template>\n&lt;a-form-model\n      ref=\"dynamicValidateForm\"\n      :model=\"dynamicValidateForm\"\n      v-bind=\"formItemLayoutWithOutLabel\"\n    >\n      &lt;div v-for=\"(domain, index) in dynamicValidateForm.domains\" :key=\"domain.key\">\n        &lt;a-form-model-item\n          :prop=\"'domains.' + index + '.info'\"\n          :rules=\"{\n            required: true,\n            message: '\u72b6\u6001\u8bf4\u660e\u4e0d\u80fd\u4e3a\u7a7a',\n            trigger: 'blur',\n          }\"\n          :style=\"{width: '30%', 'margin-right': '20px', 'display': 'inline-block'}\"\n        >\n          &lt;a-input\n            v-model=\"domain.info\"\n            placeholder=\"\u8bf7\u8f93\u5165\u72b6\u6001\u8bf4\u660e\"\n          \/>\n        &lt;\/a-form-model-item>\n        &lt;a-form-model-item\n          :prop=\"'domains.' + index + '.val'\"\n          :rules=\"{\n            required: true,\n            message: '\u72b6\u6001\u8bf4\u660e\u53c2\u6570\u503c\u4e0d\u80fd\u4e3a\u7a7a',\n            trigger: 'blur',\n          }\"\n          :style=\"{width: '30%', 'margin-right': '20px', 'display': 'inline-block'}\"\n        >\n          &lt;a-input-number\n            v-model=\"domain.val\"\n            :min=\"0\"\n            :max=\"9999999999\"\n          \/>\n        &lt;\/a-form-model-item>\n        &lt;span\n          v-if=\"dynamicValidateForm.domains.length > 1\"\n          class=\"dynamic-delete-button\"\n          :disabled=\"dynamicValidateForm.domains.length === 1\"\n          @click=\"removeDomain(domain)\"\n        >\n          &lt;i class=\"iconfont icon-stop\" \/>\n        &lt;\/span>\n      &lt;\/div>\n      &lt;a-row v-if=\"isError\" :gutter=\"24\">\n        &lt;a-col :span=\"22\" :offset=\"2\" class=\"red\">{{ tips }}&lt;\/a-col>\n      &lt;\/a-row>\n    &lt;\/a-form-model>\n&lt;\/template>\n&lt;script>\nexport default {\n  name: 'Test',\n  data() {\n    return {\n      formData: {\n        key: null,\n        unit: undefined,\n        name: undefined,\n        statusList: &#91;{\n          key: 0,\n          info: '',\n          val: ''\n        }]\n      },\n      labelCol: { span: 5 },\n      wrapperCol: { span: 17 },\n      dynamicValidateForm: {domains: &#91;]}\n    }\n  },\n  methods: {\n    removeDomain(item) {\n      let index = this.dynamicValidateForm.domains.indexOf(item)\n      if (index !== -1) {\n        this.dynamicValidateForm.domains.splice(index, 1)\n      }\n    },\n    addDomain() {\n      this.dynamicValidateForm.domains.push({\n        info: '',\n        val: '',\n        key: Date.now()\n      })\n      this.isError = false\n    }\n    }\n}\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>Tips: \u52a8\u6001\u8868\u5355\u4e0d\u80fd\u88aba-row\u5305\u88f9\uff0ca-form-model\u4e0a\u4e0d\u8981\u5199rule\uff0c\u5199\u5728a-form-model-item\u4e0a<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tips: \u52a8\u6001\u8868\u5355\u4e0d\u80fd\u88aba-row\u5305\u88f9\uff0ca-form-model\u4e0a\u4e0d\u8981\u5199rule\uff0c\u5199\u5728a-form-mode [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-15","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/www.mxcst.com\/index.php?rest_route=\/wp\/v2\/posts\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcst.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcst.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcst.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcst.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":1,"href":"https:\/\/www.mxcst.com\/index.php?rest_route=\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/www.mxcst.com\/index.php?rest_route=\/wp\/v2\/posts\/15\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/www.mxcst.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcst.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcst.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}