From 5b418a91cf2fdc2a1d61f2c5faf1cc578938ceee Mon Sep 17 00:00:00 2001
From: sheepluo <yaoyanhuoyi@qq.com>
Date: Mon, 24 Jul 2023 10:11:54 +0800
Subject: [PATCH] fix(checkbox): support custom node in checkbox group (#2604)

* fix(checkbox): support custom node in checkbox group

* test(checkbox): update snapshots

* fix(checkbox): update snapshots
---
 src/checkbox/_example/group.vue          | 16 ++++++++++++----
 src/checkbox/group.tsx                   | 18 ++++++++++++++----
 test/snap/__snapshots__/csr.test.js.snap |  6 +++---
 test/snap/__snapshots__/ssr.test.js.snap |  2 +-
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/checkbox/_example/group.vue b/src/checkbox/_example/group.vue
index 3bcbe384d..6e62c272d 100644
--- a/src/checkbox/_example/group.vue
+++ b/src/checkbox/_example/group.vue
@@ -9,9 +9,12 @@
     </t-space>
 
     <!-- key 是避免重复渲染的关键；Checkbox.key is the key point of list render -->
-    <!-- 数据量大的情况下，不建议使用这种方式：因父组件 CheckboxGroup 选中项变化，子组件 Checkbox 一定重新渲染。 -->
+    <!-- 数据量大的情况下，不建议使用这种方式：因 Vue2 框架中，父组件 CheckboxGroup 选中项变化，子组件 Checkbox 一定全量重新渲染。 -->
     <t-space direction="vertical">
-      <div>方式二：组件内置全选功能，使用插槽定义选项。选中值: {{ value2.join(', ') }}</div>
+      <div>
+        方式二：组件内置全选功能，使用插槽定义选项。⚠️注意：数据量大时，不建议使用这种方式。选中值:
+        {{ value2.join(', ') }}。
+      </div>
       <t-checkbox-group v-model="value2" @change="onChange2">
         <t-checkbox key="1" :checkAll="true" label="全选" />
         <t-checkbox key="2" value="选项一">选项一</t-checkbox>
@@ -22,13 +25,18 @@
 
     <!-- 数据量大的情况下，建议使用这种方式，可以避免选中项重复渲染 -->
     <t-space direction="vertical">
-      <div>方式三：组件内置全选功能，使用 `options` 定义选项。选中值: {{ value3.join(', ') }}</div>
+      <div>
+        方式三：组件内置全选功能，使用 `options` 定义选项。数据量大时，可以避免所有元素重新渲染。选中值:
+        {{ value3.join(', ') }}
+      </div>
       <t-checkbox-group v-model="value3" :options="options2" @change="onChange3" />
     </t-space>
 
     <!-- 数据量大的情况下，建议使用这种方式，可以避免选中项重复渲染 -->
     <t-space direction="vertical">
-      <div>方式四：组件内置全选功能，`options` 定义选项列表，插槽定义选项内容</div>
+      <div>
+        方式四：组件内置全选功能，`options` 定义选项列表，插槽定义选项内容。数据量大时，可以避免所有元素重新渲染。
+      </div>
       <t-checkbox-group :defaultValue="['选项一']" :options="options3">
         <template #label="{ data: { label, value, checkAll }, index }">
           <span v-if="checkAll">{{ label }}</span>
diff --git a/src/checkbox/group.tsx b/src/checkbox/group.tsx
index 7b8ef2a85..970269d1d 100644
--- a/src/checkbox/group.tsx
+++ b/src/checkbox/group.tsx
@@ -177,12 +177,25 @@ export default defineComponent({
       { immediate: true },
     );
 
+    const addStoreKeyToCheckbox = (nodes: VNode[]) => {
+      for (let i = 0, len = nodes.length; i < len; i++) {
+        const vNode = nodes[i];
+        if (vNode.componentOptions && /TCheckbox/.test(vNode.tag)) {
+          (vNode.componentOptions.propsData as any).storeKey = storeKey;
+        }
+        if (vNode.children?.length) {
+          addStoreKeyToCheckbox(vNode.children);
+        }
+      }
+    };
+
     return {
       storeKey,
       optionList,
       innerValue,
       COMPONENT_NAME,
       getOptionListBySlots,
+      addStoreKeyToCheckbox,
     };
   },
 
@@ -204,10 +217,7 @@ export default defineComponent({
     } else {
       const nodes = this.$scopedSlots.default?.(null);
       this.optionList = this.getOptionListBySlots();
-      nodes.forEach((vNode: VNode) => {
-        // eslint-disable-next-line
-        (vNode.componentOptions.propsData as any).storeKey = this.storeKey;
-      });
+      this.addStoreKeyToCheckbox(nodes);
       children = nodes;
     }
     return (
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index c227b1edc..2bb4e3624 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -24660,7 +24660,7 @@ exports[`csr snapshot test > csr test ./src/checkbox/_example/group.vue 1`] = `
         class="t-space-item"
       >
         <div>
-          方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一
+           方式二：组件内置全选功能，使用插槽定义选项。⚠️注意：数据量大时，不建议使用这种方式。选中值: 选项一。 
         </div>
       </div>
       <div
@@ -24762,7 +24762,7 @@ exports[`csr snapshot test > csr test ./src/checkbox/_example/group.vue 1`] = `
         class="t-space-item"
       >
         <div>
-          方式三：组件内置全选功能，使用 \`options\` 定义选项。选中值: 选项一, 选项二, 选项三
+           方式三：组件内置全选功能，使用 \`options\` 定义选项。数据量大时，可以避免所有元素重新渲染。选中值: 选项一, 选项二, 选项三 
         </div>
       </div>
       <div
@@ -24866,7 +24866,7 @@ exports[`csr snapshot test > csr test ./src/checkbox/_example/group.vue 1`] = `
         class="t-space-item"
       >
         <div>
-          方式四：组件内置全选功能，\`options\` 定义选项列表，插槽定义选项内容
+           方式四：组件内置全选功能，\`options\` 定义选项列表，插槽定义选项内容。数据量大时，可以避免所有元素重新渲染。 
         </div>
       </div>
       <div
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
index 5ed96e456..cd78e20fb 100644
--- a/test/snap/__snapshots__/ssr.test.js.snap
+++ b/test/snap/__snapshots__/ssr.test.js.snap
@@ -232,7 +232,7 @@ exports[`ssr snapshot test > renders ./src/checkbox/_example/base.vue correctly
 
 exports[`ssr snapshot test > renders ./src/checkbox/_example/controlled.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:36px;\\" data-v-032bf202><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\" data-v-032bf202><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" data-v-032bf202><input type=\\"checkbox\\" tabindex=\\"-1\\" checked=\\"checked\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">语法糖（v-model）</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" data-v-032bf202><input type=\\"checkbox\\" tabindex=\\"-1\\" checked=\\"checked\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">受控属性</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\" data-v-032bf202><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">非受控属性</span></label></div></div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\" data-v-032bf202><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">受控模式选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"2\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">受控模式选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"3\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">受控模式选项三</span></label></div></div></div>"`;
 
-exports[`ssr snapshot test > renders ./src/checkbox/_example/group.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:48px;\\"><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式一：业务侧自定义全选功能。选中值: 选项一</div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" indeterminate=\\"indeterminate\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label></div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><div>选项一</div></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一</div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式三：组件内置全选功能，使用 \`options\` 定义选项。选中值: 选项一, 选项二, 选项三</div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><div>选项二</div></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式四：组件内置全选功能，\`options\` 定义选项列表，插槽定义选项内容</div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span>全选</span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionA\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项一（optionA/1） </span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionB\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项二（optionB/2） </span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionC\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项三（optionC/3） </span></span></label></div></div></div></div></div>"`;
+exports[`ssr snapshot test > renders ./src/checkbox/_example/group.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:48px;\\"><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式一：业务侧自定义全选功能。选中值: 选项一</div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" indeterminate=\\"indeterminate\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label></div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><div>选项一</div></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div> 方式二：组件内置全选功能，使用插槽定义选项。⚠️注意：数据量大时，不建议使用这种方式。选中值: 选项一。 </div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div> 方式三：组件内置全选功能，使用 \`options\` 定义选项。数据量大时，可以避免所有元素重新渲染。选中值: 选项一, 选项二, 选项三 </div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><div>选项二</div></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div> 方式四：组件内置全选功能，\`options\` 定义选项列表，插槽定义选项内容。数据量大时，可以避免所有元素重新渲染。 </div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span>全选</span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionA\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项一（optionA/1） </span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionB\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项二（optionB/2） </span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionC\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项三（optionC/3） </span></span></label></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > renders ./src/checkbox/_example/link.vue correctly 1`] = `
 "<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:24px;\\"><div class=\\"t-space-item\\"><div>选中值: [