{"id":1064,"date":"2022-09-03T16:37:00","date_gmt":"2022-09-03T08:37:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1064"},"modified":"2022-08-26T16:58:40","modified_gmt":"2022-08-26T08:58:40","slug":"vue3-element-plus%e6%a0%91%e5%bd%a2%e6%8e%a7%e4%bb%b6%e4%bd%93%e9%aa%8c","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1064","title":{"rendered":"Vue3-element-plus\u6811\u5f62\u63a7\u4ef6\u4f53\u9a8c"},"content":{"rendered":"\n<p>\u524d\u6bb5\u65f6\u5019\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86\u5230\u4e86\u6811\u5f62\u63a7\u4ef6\uff1a<\/p>\n\n\n\n<p>\u5730\u5740\u642c\u8fd0\u4e00\u6ce2\uff1a<a href=\"https:\/\/element.eleme.cn\/#\/zh-CN\/component\/tree\">https:\/\/element.eleme.cn\/#\/zh-CN\/component\/tree<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/08\/image-4.png\" alt=\"\" class=\"wp-image-1065\" width=\"259\" height=\"233\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/08\/image-4.png 774w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/08\/image-4-300x270.png 300w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/08\/image-4-768x691.png 768w\" sizes=\"(max-width: 259px) 100vw, 259px\" \/><\/figure>\n\n\n\n<p>\u4f7f\u7528\u8fc7\u7a0b\u4e2d\u6d89\u53ca\u5230\u4e86\u51e0\u5757\uff0c\u9ed8\u8ba4\u5c55\u5f00\uff0c\u52a8\u6001\u52fe\u9009\uff0c\u83b7\u53d6\u52fe\u9009\u5bf9\u8c61\u5185\u5bb9\uff0c<\/p>\n\n\n\n<p>\u8d34\u51fa\u6765\u4ee3\u7801<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/08\/image-6.png\" alt=\"\" class=\"wp-image-1067\" width=\"377\" height=\"139\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/08\/image-6.png 970w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/08\/image-6-300x111.png 300w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/08\/image-6-768x285.png 768w\" sizes=\"(max-width: 377px) 100vw, 377px\" \/><\/figure>\n\n\n\n<p>defaultProps: { children: &#8216;children&#8217;, label: &#8216;label&#8217; },<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>defaultSelect: [],\u662f\u4e00\u4e2a\u7a7a\u6570\u7ec4\uff0c\u901a\u5e38\u60c5\u51b5\u4e0b\u628a\u8bf7\u6c42\u5230\u7684\u5185\u5bb9id \u88c5\u5230\u8fd9\u91cc\uff0c<\/p>\n\n\n\n<p>\u5f53\u70b9\u51fb \u754c\u9762 \u4fdd\u5b58\u6309\u94ae\u7684\u65f6\u5019 \u5199\u5165\u8fd9\u4e00\u884c\u4ee3\u7801<\/p>\n\n\n\n<p>  let getKeys = this.$refs.tree.getCheckedKeys()<\/p>\n\n\n\n<p>\u5c31\u80fd\u591f\u83b7\u53d6\u52fe\u9009\u7684\u5185\u5bb9,\u53d6\u5230\u7684\u5185\u5bb9\u662f\u4e00\u4e2a \u6570\u7ec4 [&#8216;1&#8242;,&#8217;2&#8242;,&#8217;3&#8217;]\uff0c\u6570\u7ec4\u5185\u76841,2,3\u6307\u7684\u662f\u5f53\u524d\u6570\u7ec4\u5185\u7684 id<\/p>\n\n\n\n<p>\u5176\u5b9e\u6ca1\u5565\u96be\u7684\uff0c\u770b\u4e00\u4e0belementui \u5c31\u77e5\u9053\u548b\u4f7f\u7528\u4e86\uff0c\u5269\u4e0b\u7684\u5c31\u662f\u4e1a\u52a1\u903b\u8f91\uff0c<\/p>\n\n\n\n<p>\u6bd4\u5982\u6211\u901a\u8fc7\u8bf7\u6c42\u83b7\u53d6\u5230\u4e86\u540e\u53f0\u7ed9\u7684 \u6570\u636e<\/p>\n\n\n\n<p>let data= [{&#8220;id&#8221;:31},{&#8220;id&#8221;:32,&#8221;children&#8221;:[{&#8220;id&#8221;:34},{&#8220;id&#8221;:35}]},{&#8220;id&#8221;:33}],<\/p>\n\n\n\n<p>\u628a\u5185\u90e8\u6240\u6709\u7684children \u62ff\u51fa\u6765\u5408\u5e76\u5230\u6700\u5916\u5c42\u53d8\u6210 <\/p>\n\n\n\n<p>let dataFilter = [{&#8220;id&#8221;:31},{&#8220;id&#8221;:32},{&#8220;id&#8221;:33},{&#8220;id&#8221;:34},{&#8220;id&#8221;:35}]<\/p>\n\n\n\n<p>\u6570\u636e\u5185\u90e8\u5faa\u73af\u904d\u5386(\u4e3b\u8981\u662f\u4f1a\u6709\u4e00\u4e9b\u591a\u5c42\u7684children)\uff0c\u63d0\u53d6\u51fa\u6765\u5408\u5e76\u5230\u4e00\u4e2a\u5b8c\u6574\u7684\u5bf9\u8c61\uff0c<\/p>\n\n\n\n<p>\u7136\u540e\u628a\u60f3\u8981\u5c55\u793a\u7684 \u6570\u7ec4[31,33,35] \u4e0e dataFilter \u53d6\u4ea4\u96c6\uff0c\u5728\u7ed9\u5230<meta charset=\"utf-8\">defaultSelect \u5c31\u597d\u4e86\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u6bb5\u65f6\u5019\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86\u5230\u4e86\u6811\u5f62\u63a7\u4ef6\uff1a \u5730\u5740\u642c\u8fd0\u4e00\u6ce2\uff1ahttps:\/\/element.eleme.cn\/#\/zh- [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,1],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1064"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1064"}],"version-history":[{"count":1,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1064\/revisions"}],"predecessor-version":[{"id":1068,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1064\/revisions\/1068"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1064"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}