{"id":1103,"date":"2022-09-08T17:00:30","date_gmt":"2022-09-08T09:00:30","guid":{"rendered":"https:\/\/usei.cn\/?p=1103"},"modified":"2022-09-08T17:04:52","modified_gmt":"2022-09-08T09:04:52","slug":"vue-%e8%a1%a8%e5%8d%95%e9%aa%8c%e8%af%81-%e5%b5%8c%e5%a5%97%e9%aa%8c%e8%af%81","status":"publish","type":"post","link":"https:\/\/usei.cn\/index.php\/2022\/09\/08\/vue-%e8%a1%a8%e5%8d%95%e9%aa%8c%e8%af%81-%e5%b5%8c%e5%a5%97%e9%aa%8c%e8%af%81\/","title":{"rendered":"Vue \u8868\u5355\u9a8c\u8bc1-\u5d4c\u5957\u9a8c\u8bc1"},"content":{"rendered":"\n<p>el-form \u8868\u5355\u9a8c\u8bc1\u65f6 \u4f7f\u7528\u7684\u662f  &nbsp;<a href=\"https:\/\/github.com\/yiminghe\/async-validator\">async-validator<\/a> \u89c4\u5219\u53ef\u4ee5\u5199\u5728 data \u4e2d\uff0c\u5982\u679c form \u8868\u5355\u4e2d\u51fa\u73b0\u6570\u7ec4\uff0c\u4e14\u6570\u7ec4\u4e2d\u5b57\u6bb5\u9700\u8981\u9a8c\u8bc1\u65f6\u53ef\u4ee5\u5355\u72ec\u5199\u9a8c\u8bc1\u89c4\u5219<\/p>\n\n\n\n<p>data \u4e2d\u7684\u6570\u636e\u7ed3\u6784<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n {\n    \/\/ \u9700\u8981\u63d0\u4ea4\u5230\u670d\u52a1\u5668\u7684\u7ed3\u6784\n    formData:{\n      cname:'',\n      \/\/ \u5d4c\u5957\u6570\u7ec4\uff0c\u53ef\u52a8\u6001\u589e\u52a0\n      list: &#91;\n        {sname:'',age:''},\n        {sname:'',age:''}\n      ]\n    }\n    \/\/ \u4e3b\u4f53\u89c4\u5219\n    rules:{\n      cname: &#91;\n        { required: true, message: '\u8bf7\u8f93\u5165\u73ed\u7ea7\u540d\u79f0', trigger: 'blur'  }\n      ],\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"has-vivid-red-color has-text-color\"><strong>\u901a\u8fc7\u7d22\u5f15\u76f4\u63a5\u7ed1\u5b9a  el-form-item \u7684prop \u5c5e\u6027<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;templaye&gt;\n\n&lt;form ref=\"form\" v-model=\"formData\" :rules=\"rules\"&gt;\n  &lt;el-form-item label=\"\u73ed\u7ea7\u540d\u79f0\" prop=\"cname\"&gt;\n    &lt;el-input v-model=\"formData.cname\" autocomplete=\"off\"&gt;&lt;\/el-input&gt;\n  &lt;\/el-form-item&gt;\n  &lt;el-table&gt;\n    &lt;el-table-column&gt;\n      &lt;template slot-scope=\"{row,$index}\"&gt;\n        &lt;el-form-item :prop=\"`list.${$index}.sname`\"  :rules=\"{required: true, message: '\u8bf7\u8f93\u5165\u5b66\u751f\u540d\u79f0', trigger: 'blur'}\"&gt;\n        &lt;el-input v-model=\"row.sname\"&gt;&lt;\/el-input&gt;\n        &lt;\/el-form-item&gt;\n      &lt;\/template&gt;\n    &lt;\/el-table-column&gt;\n     &lt;el-table-column&gt;\n      &lt;template slot-scope=\"{row,$index}\"&gt;\n        &lt;el-form-item :prop=\"`list.${$index}.age`\"  :rules=\"{required: true, message: '\u8bf7\u8f93\u5165\u5b66\u751f\u5e74\u9f84', trigger: 'blur'}\"&gt;\n        &lt;el-input v-model=\"row.age\"&gt;&lt;\/el-input&gt;\n        &lt;\/el-form-item&gt;\n      &lt;\/template&gt;\n    &lt;\/el-table-column&gt;\n  &lt;\/el-table&gt;\n&lt;\/form&gt;\n&lt;\/templaye&gt;<\/code><\/pre>\n\n\n\n<p>\u63d0\u4ea4\u524d\u9a8c\u8bc1<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>methods:{\n  submitForm(formName) {\n    this.$refs&#91;formName].validate((valid) =&gt; {\n      if (valid) {\n        alert('\u9a8c\u8bc1\u6210\u529f!');\n      } else {\n        return false;\n      }\n    });\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>el-form \u8868\u5355\u9a8c\u8bc1\u65f6 \u4f7f\u7528\u7684\u662f &nbsp;async-validator \u89c4\u5219\u53ef\u4ee5\u5199\u5728 data \u4e2d\uff0c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,8],"tags":[],"class_list":["post-1103","post","type-post","status-publish","format-standard","hentry","category-vue","category-frontend"],"_links":{"self":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1103"}],"version-history":[{"count":7,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1103\/revisions"}],"predecessor-version":[{"id":1111,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1103\/revisions\/1111"}],"wp:attachment":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}