{"id":767,"date":"2023-05-31T10:46:11","date_gmt":"2023-05-31T02:46:11","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=767"},"modified":"2023-05-31T10:46:41","modified_gmt":"2023-05-31T02:46:41","slug":"antd-design-%e6%94%b9%e9%80%a0-treeselect","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=767","title":{"rendered":"Antd Design \u6539\u9020 TreeSelect"},"content":{"rendered":"\n<p>Antd Design \u7684 TreeSelect \u7684\u591a\u9078\u6846\u529f\u80fd\uff0c\u9810\u8a2d\u662f\u7236\u5b50\u95dc\u806f\uff0c\u7576\u7236\u9078\u53d6\u6642\uff0c\u81ea\u52d5\u5c07\u5b50\u5168\u9078\uff1b\u5982\u679c\u8981\u55ae\u7368\u52fe\u9078\u7236\uff0c\u53ef\u4ee5\u5c07 <code>treeCheckStrictly<\/code> \u5c6c\u6027\u8a2d\u5b9a\u70ba <code>true<\/code>\uff0c\u6210\u70ba\u53d7\u63a7\u7d44\u4ef6\uff0c\u89e3\u9664\u7236\u5b50\u95dc\u806f\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u9032\u884c\u6539\u9020\uff0c\u5c07\u7d44\u4ef6\u6539\u9020\u70ba\u4ee5\u4e0b\u4f7f\u7528\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9ede\u9078\u4e00\u6b21\u8907\u9078\u6846\uff0c\u8868\u793a\u9078\u4e2d\u7576\u524d\u7bc0\u9ede\u53ca\u8a72\u7bc0\u9ede\u4e0b\u7684\u6240\u6709\u5b50\u7bc0\u9ede<\/li>\n\n\n\n<li>\u9ede\u9078\u7b2c\u4e8c\u6b21\uff0c\u8868\u793a\u9078\u4e2d\u7576\u524d\u7bc0\u9ede \uff08\u53d6\u6d88\u5b50\u7bc0\u9ede\u9078\u53d6\uff09<\/li>\n\n\n\n<li>\u9ede\u9078\u7b2c\u4e09\u6b21\uff0c\u8868\u793a\u4e0d\u9078\u4e2d\u7576\u524d\u7bc0\u9ede\uff08\u53d6\u6d88\u7236\u7bc0\u9ede\u9078\u53d6\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u9996\u5148\u5c07 <code>treeCheckStrictly<\/code> \u8a2d\u5b9a\u70ba <code>false<\/code>\uff0c\u81ea\u884c\u64b0\u5beb <code>handleChange<\/code> \u51fd\u5f0f\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const data = {\n  1: {\n    id: 1,\n    name: '\u7238\u7238',\n    children: [2, 3]\n  },\n  2: {\n    id: 2,\n    name: '\u5c0f\u5b691',\n    children: []\n  },\n  3: {\n    id: 3,\n    name: '\u5c0f\u5b693',\n    children: []\n  },\n}\n\n\nconst getChildIdType = (\n  children,\n  selectIds,\n  noSelectedChildId = [],\n  allChildId = [],\n) => {\n  children.forEach((childId) => {\n    const index = selectIds.findIndex((id) => id === childId);\n    \/\/ \u641c\u5c0b\u5df2\u9078\uff0c\u82e5\u672a\u9078\u4e2d\uff0c\u52a0\u5165 noSelectedChildId\n    index === -1 &amp;&amp; noSelectedChildId.push(childId);\n\n    allChildId.push(childId);\n    if (\n      data[childId].children &amp;&amp;\n      data[childId].children.length > 0\n    ) {\n      \/\/ \u9084\u6709\u4e0b\u5c64\u7bc0\u9ede\n      getChildIdType(\n        data[childId].children,\n        selectIds,\n        noSelectedChildId,\n        allChildId,\n      );\n    }\n  });\n  return { noSelectedChildId, allChildId };\n};\n\nconst handleChange = (value, label, extra) => {\n  let selectIds = value.map((item) => item.value);\n  if (\n    extra.triggerValue &amp;&amp;\n    data[extra.triggerValue].children.length > 0\n  ) {\n    \/\/ \u4e0d\u662f\u5b50\u7bc0\u9ede\n    const { noSelectedChildId: noSelectedId, allChildId: allId } =\n      getChildIdType(\n        data[extra.triggerValue].children,\n        selectIds,\n      );\n    if (extra.checked) {\n      \/\/ \u7236\u7bc0\u9ede\u88ab\u9078\u4e2d\n      if (noSelectedId.length > 0) {\n        \/\/ \u5b50\u7bc0\u9ede\u6c92\u6709\u5168\u90e8\u9078\u4e2d\uff0c\u5247\u5168\u9078\u5b50\u7bc0\u9ede\n        selectIds = [...selectIds, ...noSelectedId];\n      }\n    } else {\n      \/\/ \u7236\u7bc0\u9ede\u53d6\u6d88\u9078\u53d6\n      if (noSelectedId.length === 0) {\n        \/\/ \u82e5\u5b50\u7bc0\u9ede\u5168\u9078\u4e2d\uff0c\u5247\u5168\u90e8\u53d6\u6d88\u9078\u53d6\n        selectIds = value.filter((item) => !allId.includes(item.value));\n        \/\/ \u9078\u53d6\u7236\u7bc0\u9ede\n        selectIds.push(extra.triggerNode.props.value);\n      }\n    }\n  }\n  if (field &amp;&amp; typeof field.onChange === 'function') {\n    field.onChange(selectIds);\n  }\n};<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<p>\u53c3\u8003\u8cc7\u6599\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/juejin.cn\/post\/7185037038301741112\" data-type=\"URL\" data-id=\"https:\/\/juejin.cn\/post\/7185037038301741112\" target=\"_blank\">antd design TreeSelect \u6539\u9020<\/a><br>Note. \u6587\u7ae0\u4e2d\u4ee5 <code>extra.triggerNode?.props?.children<\/code> \u4f86\u6293\u53d6\u5c0f\u5b69 node\uff0c\u500b\u4eba\u5728\u4f7f\u7528\u6642\u4e0d\u7b26\u5408\u9810\u671f\uff0c\u6240\u4ee5\u6539\u70ba\u76f4\u63a5\u6293 data \u4e2d\u7684\u8cc7\u6599\u3002\u8b80\u8005\u53ef\u518d\u53c3\u8003\u6b64\u7bc7\u6587\u7ae0\u505a\u6cd5\u3002<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Antd Design \u7684 TreeSelect &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[47],"tags":[48],"class_list":["post-767","post","type-post","status-publish","format-standard","hentry","category-47","tag-antd-design"],"_links":{"self":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=767"}],"version-history":[{"count":2,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":769,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/767\/revisions\/769"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}