feat(tree): tree-chekbox支持number类型

examples/tree/demos/checkable.vue

@@ -15,6 +15,13 @@
             </t-radio-button>
           </t-radio-group>
         </t-form-item>
+        <t-form-item label="value 类型" style="margin-bottom: 16px">
+          <t-radio-group v-model="valueType" name="value-type" variant="default-filled">
+            <t-radio-button v-for="item in valueTypeOptions" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </t-radio-button>
+          </t-radio-group>
+        </t-form-item>
       </t-form>
     </div>
     <t-tree
@@ -31,7 +38,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 const valueOptions = [
   {
@@ -48,7 +55,18 @@ const valueOptions = [
   },
 ];
 
-const items = [
+const valueTypeOptions = [
+  {
+    value: 'string',
+    label: 'string',
+  },
+  {
+    value: 'number',
+    label: 'number',
+  },
+];
+
+const itemsString = [
   {
     value: '1',
     label: '1',
@@ -139,9 +157,46 @@ const items = [
   },
 ];
 
+const itemsNumber = [
+  {
+    value: 1,
+    label: '1',
+    children: [
+      {
+        value: 1.1,
+        label: '1.1',
+      },
+      {
+        value: 1.2,
+        label: '1.2',
+      },
+    ],
+  },
+  {
+    value: 2,
+    label: '2',
+    children: [
+      {
+        value: 2.1,
+        label: '2.1',
+      },
+      {
+        value: 2.2,
+        label: '2.2',
+      },
+    ],
+  },
+];
+
 const valueMode = ref('onlyLeaf');
+const valueType = ref('string');
 const checkable = ref(true);
 const checkStrictly = ref(false);
+const items = ref(itemsString);
+
+watch(valueType, (type) => {
+  items.value = type === 'string' ? itemsString : itemsNumber;
+});
 
 const onClick = (context) => {
   console.info('onClick:', context);

src/tree/useTree.tsx

@@ -7,7 +7,7 @@ import TreeNode from '../_common/js/tree/tree-node';
 
 import useDefaultValue from '../hooks/useDefaultValue';
 import useVModel from '../hooks/useVModel';
-import { getMark, getNode, getStoreConfig } from './util';
+import { getMark, getNode, getStoreConfig, getRightData } from './util';
 
 import { TypeEventState, TypeTreeNodeModel } from './interface';
 
@@ -158,7 +158,7 @@ export default function useTree(props: TdTreeProps) {
 
   // 初始化
   const init = () => {
-    let options = props.data;
+    let options = getRightData(props.data);
     const store = new TreeStore({
       ...getStoreConfig(props),
       onLoad: (info: TypeEventState) => {
@@ -203,6 +203,7 @@ export default function useTree(props: TdTreeProps) {
   watch(
     () => props.data,
     (list) => {
+      list = getRightData(props.data);
       cacheMap.clear();
 
       treeStore.value.reload(list);

src/tree/util.ts

@@ -127,3 +127,16 @@ export const getStoreConfig = (props: TdTreeProps) => {
   ]);
   return storeProps;
 };
+
+export const getRightData = (list: TdTreeProps['data']) => {
+  const ds = Array.isArray(list) ? list : [];
+  return ds.map((item) => {
+    if (item.value) {
+      item.value = item.value.toString();
+    }
+    if (item.children && Array.isArray(item.children)) {
+      item.children = getRightData(item.children);
+    }
+    return item;
+  });
+};

test/snap/__snapshots__/csr.test.js.snap

@@ -132364,6 +132364,90 @@ exports[`csr snapshot test > csr test ./examples/tree/demos/checkable.vue 1`] =
 
         </div>
       </div>
+      <div
+        class="t-form__item t-form-item__"
+        style="margin-bottom: 16px;"
+      >
+        <div
+          class="t-form__label t-form__label--right"
+          style="width: 100px;"
+        >
+          <label
+            for=""
+          >
+            value 类型
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
+          style="margin-left: 100px;"
+        >
+          <div
+            class="t-form__controls-content"
+          >
+
+            <div
+              class="t-radio-group t-size-m t-radio-group--filled"
+            >
+
+
+              <label
+                class="t-radio-button t-is-checked"
+              >
+                <input
+                  class="t-radio-button__former"
+                  name="value-type"
+                  type="radio"
+                  value="string"
+                />
+                <span
+                  class="t-radio-button__input"
+                />
+                <span
+                  class="t-radio-button__label"
+                >
+
+
+                  string
+
+
+                </span>
+              </label>
+              <label
+                class="t-radio-button"
+              >
+                <input
+                  class="t-radio-button__former"
+                  name="value-type"
+                  type="radio"
+                  value="number"
+                />
+                <span
+                  class="t-radio-button__input"
+                />
+                <span
+                  class="t-radio-button__label"
+                >
+
+
+                  number
+
+
+                </span>
+              </label>
+
+
+              <!---->
+            </div>
+
+            <!---->
+          </div>
+
+          <!---->
+          <!---->
+
+        </div>
+      </div>
 
     </form>
   </div>