修改菜单树无法展开问题

2026-07-14 14:39:59 +08:00
parent b3d671a93e
commit d0d62ab0af
8 changed files with 99 additions and 79 deletions
--- a/src/components/icon/index.vue
+++ b/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
--- a/src/components/icon/svg/index.vue
+++ b/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>
--- a/src/components/table/defaultAttribute.ts
+++ b/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
 }
--- a/src/styles/vxeTable.scss
+++ b/src/styles/vxeTable.scss
@@ -81,14 +81,17 @@
 .vxe-modal--wrapper {
    z-index: 5000 !important;
 }
-// .vxe-table--body .vxe-body--row:nth-child(even) {
-//     background-color: #f9f9f9;
-//     // background-color: var(--el-color-primary-light-9);
-// }
-
-// .vxe-table--body .vxe-body--row:nth-child(odd) {
-//     background-color: #ffffff;
-// }
+/* 斑马纹：新版 vxe 背景画在 column 上，默认条纹色 #fafafa 几乎看不见 */
+:root {
+    --vxe-ui-table-row-striped-background-color: #fafafa;
+    --vxe-ui-table-row-hover-striped-background-color: #eef1f6;
+}
+.vxe-table--render-default .vxe-body--row.row--stripe > .vxe-body--column {
+    background-color: var(--vxe-ui-table-row-striped-background-color);
+}
+.vxe-table--render-default .vxe-body--row.row--hover.row--stripe > .vxe-body--column {
+    background-color: var(--vxe-ui-table-row-hover-striped-background-color);
+}
 .default-theme.splitpanes--vertical > .splitpanes__splitter,
 .default-theme .splitpanes--vertical > .splitpanes__splitter {
    width: 10px !important;
--- a/src/views/pqs/harmonicMonitoring/area/harmonicDistortionRate/index.vue
+++ b/src/views/pqs/harmonicMonitoring/area/harmonicDistortionRate/index.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="default-main online">
        <div class="online_header">
-            <TableHeader date-picker area ref="tableHeaderRef">
+            <TableHeader date-picker area ref="tableHeaderRef" showCustomColumn>
                <template #select>
                    <el-form-item label="统计类型">
                        <el-select
@@ -101,7 +101,7 @@
                        ref="tableRef"
                        :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
                        :scroll-y="{ enabled: true }"
-                        v-if="activeName == 0"
+                    
                    />
                </el-tab-pane>
                <el-tab-pane :name="1" :lazy="true" label="谐波畸变率统计图">
--- a/src/views/setting/dictionary/tree/index.vue
+++ b/src/views/setting/dictionary/tree/index.vue
@@ -1,14 +1,19 @@
 <template>
-    <div class='default-main'>
-        <div class='custom-table-header'>
+    <div class="default-main">
+        <div class="custom-table-header">
            <div class="title">字典树列表</div>
-            <el-button :icon='Plus' type='primary' @click='addMenu'>新增字典类型</el-button>
+            <el-button :icon="Plus" type="primary" @click="addMenu">新增字典类型</el-button>
        </div>
-        <Table ref='tableRef' />
-        <PopupForm ref='popupFormRef'></PopupForm>
+        <Table
+            ref="tableRef"
+            :row-config="{ isCurrent: true, isHover: true, keyField: 'id' }"
+            :tree-config="{ children: 'children', reserve: true }"
+            :scroll-y="{ enabled: false }"
+        />
+        <PopupForm ref="popupFormRef"></PopupForm>
    </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import { Plus } from '@element-plus/icons-vue'
 import { ref, onMounted, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
@@ -23,10 +28,10 @@ defineOptions({

 const popupFormRef = ref()
 const tableStore = new TableStore({
-    showPage:false,
+    showPage: false,
    url: '/system-boot/dictTree/queryTree',
    method: 'GET',
-    publicHeight:60,
+    publicHeight: 60,
    column: [
        { title: '字典名称', field: 'name', treeNode: true, align: 'left' },
        // { title: '排序', field: 'sort',width:'80'  },
@@ -49,10 +54,11 @@ const tableStore = new TableStore({
            }
        },
        {
-             title: '操作',fixed: 'right',
+            title: '操作',
+            fixed: 'right',
            width: '180',
            render: 'buttons',
-          
+
            buttons: [
                {
                    title: '新增',
--- a/src/views/system/auth/department/index.vue
+++ b/src/views/system/auth/department/index.vue
@@ -13,7 +13,11 @@
                show-word-limit
            />
        </div>
-        <Table />
+        <Table
+            :row-config="{ isCurrent: true, isHover: true, keyField: 'id' }"
+            :tree-config="{ children: 'children', reserve: true }"
+            :scroll-y="{ enabled: false }"
+        />
        <PopupForm ref="popupFormRef" @init="tableStore.index()"></PopupForm>
        <PopupPoint ref="popupPointRef"></PopupPoint>
    </div>
@@ -77,7 +81,8 @@ const tableStore = new TableStore({
            }
        },
        {
-             title: '操作',fixed: 'right',
+            title: '操作',
+            fixed: 'right',
            align: 'center',
            width: '180',
            render: 'buttons',
@@ -126,7 +131,7 @@ const tableStore = new TableStore({
                                })
                            })
                        } else {
-                             ElMessageBox.confirm('是否确认删除该部门', '提示', {
+                            ElMessageBox.confirm('是否确认删除该部门', '提示', {
                                confirmButtonText: '确认删除',
                                cancelButtonText: '取消',
                                type: 'warning'
@@ -149,7 +154,7 @@ const tableStore = new TableStore({
                        return row.children.length > 0
                    },
                    click: row => {
-                        popupPointRef.value.open( row)
+                        popupPointRef.value.open(row)
                    }
                }
            ]
--- a/src/views/system/auth/menu/menu.vue
+++ b/src/views/system/auth/menu/menu.vue
@@ -12,7 +12,12 @@
            />
            <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
        </div>
-        <Table @currentChange="currentChange" />
+        <Table
+            @currentChange="currentChange"
+            :row-config="{ isCurrent: true, isHover: true, keyField: 'id' }"
+            :tree-config="{ children: 'children', reserve: true }"
+            :scroll-y="{ enabled: false }"
+        />
        <popupMenu ref="popupRef" @init="emits('init')"></popupMenu>
    </div>
 </template>