修改菜单树无法展开问题

src/components/icon/index.vue

@@ -10,7 +10,7 @@ export default defineComponent({
             required: true
         },
         size: {
-            type: String,
+            type: [String, Number],
             default: '18px'
         },
         color: {
@@ -21,7 +21,7 @@ export default defineComponent({
     setup(props) {
         const iconStyle = computed((): CSSProperties => {
             const { size, color } = props
-            let s = `${size.replace('px', '')}px`
+            const s = `${String(size).replace('px', '')}px`
             return {
                 fontSize: s,
                 color: color

src/components/icon/svg/index.vue

@@ -1,49 +1,49 @@
-<template>
-    <div v-if="isUrl" :style="urlIconStyle" class="url-svg svg-icon icon" />
-    <svg v-else class="svg-icon icon" :style="iconStyle">
-        <use :href="iconName" />
-    </svg>
-</template>
-
-<script setup lang="ts">
-import { computed, type CSSProperties } from 'vue'
-import { isExternal } from '@/utils/common'
-interface Props {
-    name: string
-    size: string
-    color: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    name: '',
-    size: '18px',
-    color: '#000000',
-})
-
-const s = `${props.size.replace('px', '')}px`
-const iconName = computed(() => `#${props.name}`)
-const iconStyle = computed((): CSSProperties => {
-    return {
-        color: props.color,
-        fontSize: s,
-    }
-})
-const isUrl = computed(() => isExternal(props.name))
-const urlIconStyle = computed(() => {
-    return {
-        width: s,
-        height: s,
-        mask: `url(${props.name}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${props.name}) no-repeat 50% 50%`,
-    }
-})
-</script>
-
-<style scoped>
-.svg-icon {
-    width: 1em;
-    height: 1em;
-    fill: currentColor;
-    overflow: hidden;
-}
-</style>
+<template>
+    <div v-if="isUrl" :style="urlIconStyle" class="url-svg svg-icon icon" />
+    <svg v-else class="svg-icon icon" :style="iconStyle">
+        <use :href="iconName" />
+    </svg>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { isExternal } from '@/utils/common'
+interface Props {
+    name: string
+    size: string | number
+    color: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    name: '',
+    size: '18px',
+    color: '#000000',
+})
+
+const s = `${String(props.size).replace('px', '')}px`
+const iconName = computed(() => `#${props.name}`)
+const iconStyle = computed((): CSSProperties => {
+    return {
+        color: props.color,
+        fontSize: s,
+    }
+})
+const isUrl = computed(() => isExternal(props.name))
+const urlIconStyle = computed(() => {
+    return {
+        width: s,
+        height: s,
+        mask: `url(${props.name}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${props.name}) no-repeat 50% 50%`,
+    }
+})
+</script>
+
+<style scoped>
+.svg-icon {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    overflow: hidden;
+}
+</style>

src/components/table/defaultAttribute.ts

@@ -7,10 +7,11 @@ export const defaultAttribute: VxeTableProps = {
     stripe: true,
     size: 'small',
     columnConfig: { resizable: true, useKey: true },
-    rowConfig: { isCurrent: true, isHover: true },
+    rowConfig: { isCurrent: true, isHover: true, keyField: 'id' },
     scrollX: { scrollToLeftOnChange: true },
-    scrollY: { scrollToTopOnChange: true, enabled: true, gt: 100 },
-    customConfig: { enabled: true, allowFixed: false, showFooter: false, immediate: true ,mode:'default'},
+    scrollY: { enabled: false },
+    // 注意：全局不要默认开启 treeConfig，会与 stripe 冲突；树表在页面自行配置
+    customConfig: { enabled: true, allowFixed: false, showFooter: false, immediate: true, mode: 'default' },
     showOverflow: 'tooltip',
     showHeaderOverflow: false
 }