{"id":8006,"date":"2020-04-28T14:41:37","date_gmt":"2020-04-28T06:41:37","guid":{"rendered":"https:\/\/sdeno.com\/?p=8006"},"modified":"2021-01-07T15:38:37","modified_gmt":"2021-01-07T07:38:37","slug":"element-ui%e7%9a%84el-tree%e4%bd%bf%e7%94%a8check-strictly%e5%a4%9a%e9%80%89%e6%a0%91%e5%a4%8d%e9%80%89%e6%a1%86%e7%88%b6%e5%ad%90%e8%8a%82%e7%82%b9%e4%b8%8d%e5%85%b3%e8%81%94%e7%9a%84%e9%97%ae","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8006","title":{"rendered":"element ui\u7684el-tree\u4f7f\u7528check-strictly\u591a\u9009\u6811(\u590d\u9009\u6846)\u7236\u5b50\u8282\u70b9\u4e0d\u5173\u8054\u7684\u95ee\u9898"},"content":{"rendered":"<figure class=\"mdx-lazyload-container\" style=\"max-width:224px\"><div style=\"padding-top:136.16071428571%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"224\" height=\"305\" class=\"alignnone size-full wp-image-8007 lazyload\" title=\"element ui\u7684el-tree\u4f7f\u7528check-strictly\u591a\u9009\u6811(\u590d\u9009\u6846)\u7236\u5b50\u8282\u70b9\u4e0d\u5173\u8054\u7684\u95ee\u9898\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2020\/04\/treedom.jpg\" alt=\"https:\/\/sdeno.com\/wp-content\/uploads\/2020\/04\/treedom.jpg\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2020\/04\/treedom.jpg 224w, https:\/\/sdeno.com\/wp-content\/uploads\/2020\/04\/treedom-220x300.jpg 220w\" sizes=\"auto, (max-width: 224px) 100vw, 224px\"><\/figure>\n<p>\u6548\u679c1\uff1a\u6839\u8282\u70b91\u548c2\u91cc\u9762\u7684\u5b50\u8282\u70b9\u5168\u52fe\u9009\u8fd4\u56de\u7684\u662f[1,10,11,12,2,20,21]<\/p>\n<p>\u6548\u679c2\uff1a\u5f53\u6211\u4eec\u91cd\u65b0\u7f16\u8f91\u65f6\u5982\u679c\u53ea\u9009\u4e2d\u4e86[2,21]\uff0c\u90a3\u4e48\u8fd4\u56de\u7684\u6548\u679c\u662f\u53ea\u6709\u6839\u8282\u70b92\u548c\u5b83\u81ea\u5df1\u7684\u5b50\u8282\u70b921\u88ab\u9009\u4e2d\uff0c\u5982\u4e0a\u56fe<\/p>\n<p>\u6548\u679c3\uff1a\u5f53\u52fe\u9009\u4efb\u610f\u4e00\u4e2a\u5b50\u8282\u70b9\u65f6\uff0c\u5b83\u7684\u6839\u8282\u70b9\u4e5f\u88ab\u52fe\u9009<\/p>\n<p>\u6548\u679c4\uff1a\u5982\u679c\u5b50\u8282\u70b9\u90fd\u6ca1\u88ab\u52fe\u9009\uff0c\u6839\u8282\u70b9\u4e5f\u81ea\u52a8\u53d6\u6d88\u9009\u4e2d<\/p>\n<p>\u6548\u679c5\uff0c\u5f53\u70b9\u51fb\u6839\u8282\u70b9\u65f6\uff0c\u5b83\u7684\u6240\u6709\u5b50\u8282\u70b9\u90fd\u81ea\u52a8\u5168\u9009\uff0c\u53cd\u9009\u3002<\/p>\n<p>&nbsp;<\/p>\n<pre>&lt;el-tree ref=\"tree\"\r\n :data=\"treeMenus\"\r\n :props=\"multiProps\"\r\n :show-checkbox=\"true\"\r\n node-key=\"id\"\r\n highlight-current\r\n :expand-on-click-node=\"true\"\r\n :default-checked-keys=\"checkedId\"\r\n :check-strictly=\"true\"\r\n @check=\"clickDeal\"&gt;\r\n&lt;\/el-tree&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>\/\/\u6ce8\u610f\u6839\u8282\u70b9\u7684id\u503c\u8981\u8ddf\u5b50\u8282\u70b9\u91cc\u9762\u7684parentId\u503c\u4e00\u81f4\uff0c\u4e14\u8ddf\u8282\u70b9\u7684parentId\u90fd\u662f-1<\/p>\n<pre class=\"line-numbers language-css\"><code class=\" language-css\"><span class=\"token selector\">return<\/span> <span class=\"token punctuation\">{<\/span>\r\n             <span class=\"token selector\">checkedId: [],\r\n             treeMenus: [<\/span><span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token selector\">id: 1,\r\n                    parentId: -1,\r\n                    label: '\u4e00\u7ea7 1',\r\n                    children: [<\/span><span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token selector\">id: 4,\r\n                        parentId: 1,\r\n                        label: '\u4e8c\u7ea7 1-1',\r\n                        children: [<\/span><span class=\"token punctuation\">{<\/span>\r\n                            <span class=\"token selector\">id: 9,\r\n                            parentId: 4,\r\n                            label: '\u4e09\u7ea7 1-1-1',\r\n                            children: [<\/span><span class=\"token punctuation\">{<\/span>\r\n                                <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 1000<span class=\"token punctuation\">,<\/span>\r\n                                <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 9<span class=\"token punctuation\">,<\/span>\r\n                                <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\u4e09\u7ea7 1000-1-1'<\/span><span class=\"token punctuation\">,<\/span>\r\n                                <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                            <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span> <span class=\"token punctuation\">{<\/span>\r\n                                <span class=\"token selector\">id: 1001,\r\n                                parentId: 9,\r\n                                label: '\u4e09\u7ea7 1001-1-1',\r\n                                children: [<\/span><span class=\"token punctuation\">{<\/span>\r\n                                    <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 2000<span class=\"token punctuation\">,<\/span>\r\n                                    <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 1001<span class=\"token punctuation\">,<\/span>\r\n                                    <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\u4e09\u7ea7 2000-1-1'<\/span><span class=\"token punctuation\">,<\/span>\r\n                                    <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                                <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span><span class=\"token punctuation\">{<\/span>\r\n                                    <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 2001<span class=\"token punctuation\">,<\/span>\r\n                                    <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 1001<span class=\"token punctuation\">,<\/span>\r\n                                    <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\u4e09\u7ea7 2001-1-1'<\/span><span class=\"token punctuation\">,<\/span>\r\n                                    <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                                <span class=\"token punctuation\">}<\/span>]\r\n                            <span class=\"token punctuation\">}<\/span>]\r\n                        <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span> <span class=\"token punctuation\">{<\/span>\r\n                            <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 10<span class=\"token punctuation\">,<\/span>\r\n                            <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 4<span class=\"token punctuation\">,<\/span>\r\n                            <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\u4e09\u7ea7 1-1-2'<\/span><span class=\"token punctuation\">,<\/span>\r\n                            <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                        <span class=\"token punctuation\">}<\/span>]\r\n                    <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span> <span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 20<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'123'<\/span><span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                    <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span> <span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 25<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'12456'<\/span><span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                    <span class=\"token punctuation\">}<\/span>]\r\n                <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token selector\">parentId: -1,\r\n                    id: 2,\r\n                    label: '\u4e00\u7ea7 2',\r\n                    children: [<\/span><span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 2<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 5<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\u4e8c\u7ea7 2-1'<\/span><span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                    <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span> <span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 2<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 6<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\u4e8c\u7ea7 2-2'<\/span><span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                    <span class=\"token punctuation\">}<\/span>]\r\n                <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token selector\">parentId: -1,\r\n                    id: 3,\r\n                    label: '\u4e00\u7ea7 3',\r\n                    children: [<\/span><span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 3<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 7<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\u4e8c\u7ea7 3-1'<\/span><span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                    <span class=\"token punctuation\">}<\/span><span class=\"token selector\">,<\/span> <span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token property\">parentId<\/span><span class=\"token punctuation\">:<\/span> 3<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">id<\/span><span class=\"token punctuation\">:<\/span> 8<span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\u4e8c\u7ea7 3-2'<\/span><span class=\"token punctuation\">,<\/span>\r\n                        <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> []\r\n                    <span class=\"token punctuation\">}<\/span>]\r\n                <span class=\"token punctuation\">}<\/span><span class=\"token selector\">],\r\n                multiProps:<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token property\">children<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'children'<\/span><span class=\"token punctuation\">,<\/span>\r\n                    <span class=\"token property\">label<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'label'<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">}\r\n<\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"line-numbers language-csharp\"><code class=\" language-csharp\">methods<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n           <span class=\"token function\">clickDeal<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> treeStatus<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span>\r\n                <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">clickCheck<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> treeStatus<span class=\"token punctuation\">,<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$refs<span class=\"token punctuation\">.<\/span>tree<span class=\"token punctuation\">)<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n\r\n            <span class=\"token comment\">\/**\r\n             * \u6811\u5f62\u83dc\u5355\u590d\u9009\u6846\u7236\u5b50\u8282\u70b9\u4e0d\u5173\u8054\u5b9e\u73b0\u7236\u5b50\u8282\u70b9\u8054\u52a8\u56de\u663e\r\n             *\r\n             * @see selectedParent - \u5904\u7406\u7236\u8282\u70b9\u4e3a\u9009\u4e2d\r\n             * @see uniteChildSame - \u5904\u7406\u5b50\u8282\u70b9\u4e3a\u76f8\u540c\u7684\u52fe\u9009\u72b6\u6001\r\n             * @see removeParent   - \u5b50\u8282\u70b9\u5168\u6ca1\u9009\u4e2d\u53d6\u6d88\u7236\u7ea7\u7684\u9009\u4e2d\u72b6\u6001\r\n             *\r\n             * @param {Object} currentObj - \u5f53\u524d\u52fe\u9009\u8282\u70b9\u7684\u5bf9\u8c61\r\n             * @param {Object} treeStatus - \u6811\u76ee\u524d\u7684\u9009\u4e2d\u72b6\u6001\u5bf9\u8c61\r\n             * @param {Object} ref - this.$refs.xxx\r\n             **\/<\/span>\r\n            <span class=\"token function\">clickCheck<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> treeStatus<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                <span class=\"token comment\">\/\/ \u7528\u4e8e\uff1a\u7236\u5b50\u8282\u70b9\u4e25\u683c\u4e92\u4e0d\u5173\u8054\u65f6\uff0c\u7236\u8282\u70b9\u52fe\u9009\u53d8\u5316\u65f6\u901a\u77e5\u5b50\u8282\u70b9\u540c\u6b65\u53d8\u5316\uff0c\u5b9e\u73b0\u5355\u5411\u5173\u8054\u3002<\/span>\r\n                <span class=\"token keyword\">let<\/span> selected <span class=\"token operator\">=<\/span> treeStatus<span class=\"token punctuation\">.<\/span>checkedKeys<span class=\"token punctuation\">.<\/span><span class=\"token function\">indexOf<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ -1\u672a\u9009\u4e2d<\/span>\r\n\r\n                <span class=\"token comment\">\/\/ \u9009\u4e2d<\/span>\r\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>selected <span class=\"token operator\">!=<\/span><span class=\"token operator\">=<\/span> <span class=\"token operator\">-<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token comment\">\/\/ \u5b50\u8282\u70b9\u53ea\u8981\u88ab\u9009\u4e2d\u7236\u8282\u70b9\u5c31\u88ab\u9009\u4e2d<\/span>\r\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">selectedParent<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                    <span class=\"token comment\">\/\/ \u7edf\u4e00\u5904\u7406\u5b50\u8282\u70b9\u4e3a\u76f8\u540c\u7684\u52fe\u9009\u72b6\u6001<\/span>\r\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">uniteChildSame<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">true<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token comment\">\/\/ \u53d6\u6d88\u5b50\u8282\u70b9\u7684\u9009\u4e2d\u72b6\u6001\u89e6\u53d1<\/span>\r\n                    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">.<\/span>parentId <span class=\"token operator\">!=<\/span><span class=\"token operator\">=<\/span> <span class=\"token operator\">-<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">removeParent<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                    <span class=\"token punctuation\">}<\/span>\r\n\r\n                    <span class=\"token comment\">\/\/ \u672a\u9009\u4e2d \u5904\u7406\u5b50\u8282\u70b9\u5168\u90e8\u672a\u9009\u4e2d<\/span>\r\n                    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">.<\/span>children<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">!=<\/span><span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">uniteChildSame<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">false<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                    <span class=\"token punctuation\">}<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n\r\n            <span class=\"token comment\">\/**   \u7edf\u4e00\u5904\u7406\u5b50\u8282\u70b9\u4e3a\u76f8\u540c\u7684\u52fe\u9009\u72b6\u6001  **\/<\/span>\r\n            <span class=\"token function\">uniteChildSame<\/span><span class=\"token punctuation\">(<\/span>treeList<span class=\"token punctuation\">,<\/span> isSelected<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                <span class=\"token keyword\">let<\/span> treeListData <span class=\"token operator\">=<\/span> treeList<span class=\"token punctuation\">.<\/span>children<span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token keyword\">let<\/span> len <span class=\"token operator\">=<\/span> treeListData<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span>\r\n\r\n                <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setChecked<\/span><span class=\"token punctuation\">(<\/span>treeList<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">,<\/span> isSelected<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> len<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">uniteChildSame<\/span><span class=\"token punctuation\">(<\/span>treeListData<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span> isSelected<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n\r\n            <span class=\"token comment\">\/**    \u7edf\u4e00\u5904\u7406\u7236\u8282\u70b9\u4e3a\u9009\u4e2d    **\/<\/span>\r\n            <span class=\"token function\">selectedParent<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                <span class=\"token keyword\">let<\/span> currentNode <span class=\"token operator\">=<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getNode<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">.<\/span>key <span class=\"token operator\">!=<\/span><span class=\"token operator\">=<\/span> undefined<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setChecked<\/span><span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">true<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">selectedParent<\/span><span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n\r\n            <span class=\"token comment\">\/**    \u5b50\u8282\u70b9\u5168\u6ca1\u9009\u4e2d\u53d6\u6d88\u7236\u7ea7\u7684\u9009\u4e2d\u72b6\u6001   **\/<\/span>\r\n            <span class=\"token function\">removeParent<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                <span class=\"token keyword\">let<\/span> a <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token keyword\">let<\/span> b <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token keyword\">let<\/span> currentNode <span class=\"token operator\">=<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getNode<\/span><span class=\"token punctuation\">(<\/span>currentObj<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent <span class=\"token operator\">!=<\/span><span class=\"token operator\">=<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">.<\/span>key <span class=\"token operator\">!=<\/span><span class=\"token operator\">=<\/span> undefined<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setChecked<\/span><span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">true<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/\u6839\u8282\u70b9<\/span>\r\n                        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">removeParent<\/span><span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/\u9012\u5f52\u5224\u65ad\u5b50\u8282\u70b9<\/span>\r\n                    <span class=\"token punctuation\">}<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n\r\n                <span class=\"token comment\">\/\/\u4e0d\u4e3a0\u8868\u793a\u4e3a\u7236\u8282\u70b9<\/span>\r\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">!=<\/span><span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n\r\n                    <span class=\"token comment\">\/\/\u5faa\u73af\u5224\u65ad\u7236\u8282\u70b9\u4e0b\u7684\u5b50\u8282\u70b9<\/span>\r\n                    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> currentNode<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n\r\n                        <span class=\"token comment\">\/\/\u5224\u65ad\u7236\u8282\u70b9\u4e0b\u7684\u5b50\u8282\u70b9\u662f\u5426\u5168\u4e3afalse<\/span>\r\n                        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">checked<\/span> <span class=\"token operator\">==<\/span><span class=\"token operator\">=<\/span> <span class=\"token keyword\">false<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                            <span class=\"token operator\">++<\/span>a<span class=\"token punctuation\">;<\/span>\r\n\r\n                            <span class=\"token comment\">\/\/a === currentNode.childNodes.length \u8868\u660e\u5b50\u8282\u70b9\u5168\u4e3afalse<\/span>\r\n                            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>a <span class=\"token operator\">==<\/span><span class=\"token operator\">=<\/span> currentNode<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n\r\n                                <span class=\"token comment\">\/\/\u7b49\u4e8e undefined \u8df3\u8fc7,\u4e0d\u7b49\u4e8e\u7ee7\u7eed\u6267\u884c<\/span>\r\n                                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">.<\/span>key <span class=\"token operator\">!=<\/span><span class=\"token operator\">=<\/span> undefined<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                                    <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setChecked<\/span><span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">false<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/\u7236\u5143\u7d20\u8bbe\u7f6e\u4e3afalse<\/span>\r\n                                    <span class=\"token comment\">\/\/\u5faa\u73af\u4e0a\u7ea7\u7236\u8282\u70b9\u4e0b\u7684\u5b50\u8282\u70b9<\/span>\r\n                                    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n\r\n                                        <span class=\"token comment\">\/\/\u5224\u65ad\u7236\u8282\u70b9\u4e0b\u7684\u5b50\u8282\u70b9\u662f\u5426\u5168\u4e3afalse<\/span>\r\n                                        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">checked<\/span> <span class=\"token operator\">==<\/span><span class=\"token operator\">=<\/span> <span class=\"token keyword\">false<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                                            <span class=\"token operator\">++<\/span>b<span class=\"token punctuation\">;<\/span>\r\n\r\n                                            <span class=\"token comment\">\/\/b === currentNode.parent.childNodes.length \u8868\u660e\u5b50\u8282\u70b9\u5168\u4e3afalse<\/span>\r\n                                            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>b <span class=\"token operator\">==<\/span><span class=\"token operator\">=<\/span> currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">.<\/span>childNodes<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                                                <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setChecked<\/span><span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">false<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/\u7236\u5143\u7d20\u8bbe\u7f6e\u4e3afalse<\/span>\r\n                                                <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">removeParent<\/span><span class=\"token punctuation\">(<\/span>currentNode<span class=\"token punctuation\">.<\/span>parent<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">ref<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/\u7ee7\u7eed\u9012\u5f52\u5faa\u73af\u5224\u65ad<\/span>\r\n                                            <span class=\"token punctuation\">}<\/span>\r\n                                        <span class=\"token punctuation\">}<\/span>\r\n                                    <span class=\"token punctuation\">}<\/span>\r\n                                <span class=\"token punctuation\">}<\/span>\r\n                            <span class=\"token punctuation\">}<\/span>\r\n                        <span class=\"token punctuation\">}<\/span>\r\n                    <span class=\"token punctuation\">}<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n        <span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>\u83b7\u53d6\u6700\u7ec8\u52fe\u9009\u7684\u6570\u7ec4<\/p>\n<pre>\u83b7\u53d6\u6700\u7ec8\u9009\u4e2did\u503cthis.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())\u8fd4\u56de\u6570\u7ec4<\/pre>\n<pre>\/\/\u5c0f\u7ec6\u8282\u7684\u95ee\u9898\uff0c\u5982\u679cel-tree\u662f\u653e\u5728el-dialog\u5f39\u7a97\u91cc\u9762\uff0c\u90a3\u5c31\u5fc5\u987b\u70b9\u51fb\u5f39\u7a97\u7684\u65f6\u5019\u4e5f\u5373\u4f7fdom\u52a0\u8f7d\u540e\u624d\u6267\u884c\u4ee5\u4e0b\u4ee3\u7801\r\n\r\nthis.$nextTick(function() {\r\n  this.$refs.tree.setCheckedKeys(self.menus); \/\/\u5c06\u5df2\u7ecf\u9009\u4e2d\u7684\u8282\u70b9\uff0c\u6253\u4e0a\u6c9f\r\n})<\/pre>\n<p><a href=\"https:\/\/www.jianshu.com\/p\/4e0ecb0f796d\" target=\"_blank\" rel=\"noopener\">https:\/\/www.jianshu.com\/p\/4e0ecb0f796d<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6548\u679c1\uff1a\u6839\u8282\u70b91\u548c2\u91cc\u9762\u7684\u5b50\u8282\u70b9\u5168\u52fe\u9009\u8fd4\u56de\u7684\u662f[1,10,11,12,2,20,21] \u6548\u679c2\uff1a\u5f53\u6211\u4eec\u91cd\u65b0\u7f16\u8f91 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51],"tags":[],"class_list":["post-8006","post","type-post","status-publish","format-standard","hentry","category-vue-element-admin"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8006"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8006\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}