@jetlinks-web/components 3.1.15 → 3.2.1

package/es/EditTable/CellRender.js

@@ -1,11 +1,77 @@
+function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+        return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+        lastAccessLHS = value;
+        value = fn(value);
+    }
+    else if (op === 'call' || op === 'optionalCall') {
+        value = fn((...args) => value.call(lastAccessLHS, ...args));
+        lastAccessLHS = undefined;
+    }
+} return value; }
 /* Analyzed bindings: {} */
-import { defineComponent } from 'vue';
+import { defineComponent, h, shallowRef, } from 'vue';
+/**
+ * CellRender - 优化的单元格渲染组件
+ * 使用 shallowRef 和手动更新检查来避免不必要的重渲染
+ */
 const __sfc_main__ = defineComponent({
     name: "CellRender",
-    props: ['renderFn', 'value', 'record', 'index'],
+    props: {
+        renderFn: {
+            type: Function,
+            required: true
+        },
+        value: null,
+        record: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            required: true
+        }
+    },
     setup(props) {
+        // 使用 shallowRef 避免深度响应式
+        const cachedResult = shallowRef(null);
+        const lastValue = shallowRef(undefined);
+        const lastRecordId = shallowRef(undefined);
+        // 手动检查是否需要重新渲染
+        const shouldUpdate = () => {
+            // 检查 value 是否变化
+            if (props.value !== lastValue.value) {
+                return true;
+            }
+            // 检查 record 的关键属性是否变化（假设有 id 或 key）
+            const currentRecordId = _optionalChain([(props.record), 'optionalAccess', _ => _.id]) || _optionalChain([(props.record), 'optionalAccess', _2 => _2.key]);
+            if (currentRecordId !== lastRecordId.value) {
+                return true;
+            }
+            return false;
+        };
+        // 执行渲染函数
+        const render = () => {
+            if (shouldUpdate() || cachedResult.value === null) {
+                lastValue.value = props.value;
+                lastRecordId.value = _optionalChain([(props.record), 'optionalAccess', _3 => _3.id]) || _optionalChain([(props.record), 'optionalAccess', _4 => _4.key]);
+                try {
+                    cachedResult.value = props.renderFn(props.value, props.record, props.index);
+                }
+                catch (error) {
+                    console.error('[CellRender] Render error:', error);
+                    cachedResult.value = null;
+                }
+            }
+            return cachedResult.value;
+        };
         return () => {
-            return props.renderFn(props.value, props.record, props.index);
+            return h('div', { class: 'cell-render-wrapper' }, [render()]);
         };
     }
 });

package/es/EditTable/EditTable.js

@@ -30,9 +30,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "TABLE_OPEN_GROUP": "setup-maybe-ref",
   "TABLE_TOOL": "setup-maybe-ref",
   "TABLE_WRAPPER": "setup-maybe-ref",
-  "handleColumnsWidth": "setup-maybe-ref",
   "useGroup": "setup-maybe-ref",
-  "useResizeObserver": "setup-maybe-ref",
   "useValidate": "setup-maybe-ref",
   "tableProps": "setup-maybe-ref",
   "useFormContext": "setup-maybe-ref",
@@ -47,9 +45,8 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "findIndex": "setup-maybe-ref",
   "get": "setup-maybe-ref",
   "sortBy": "setup-maybe-ref",
-  "Header": "setup-const",
-  "Body": "setup-const",
   "Group": "setup-const",
+  "VirtualTable": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
   "useEditTableStyle": "setup-maybe-ref",
   "emit": "setup-const",
@@ -59,15 +56,10 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "wrapSSR": "setup-maybe-ref",
   "hashId": "setup-maybe-ref",
   "slots": "setup-maybe-ref",
-  "myColumns": "setup-ref",
   "tableWrapper": "setup-ref",
-  "tableBody": "setup-ref",
-  "scrollBarRef": "setup-ref",
-  "tableStyle": "setup-reactive-const",
-  "showScroll": "setup-ref",
-  "horizontalScrollWidth": "setup-ref",
+  "virtualTableRef": "setup-ref",
   "horizontalScrollLeft": "setup-ref",
-  "fields": "setup-const",
+  "fields": "setup-maybe-ref",
   "defaultGroupId": "literal-const",
   "fieldsErrMap": "setup-ref",
   "fieldsGroupError": "setup-ref",
@@ -81,6 +73,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "updateGroupOptions": "setup-maybe-ref",
   "_dataSource": "setup-ref",
   "bodyDataSource": "setup-ref",
+  "scroll": "setup-ref",
   "isFullscreen": "setup-maybe-ref",
   "toggle": "setup-maybe-ref",
   "rules": "setup-maybe-ref",
@@ -93,9 +86,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "removeFieldError": "setup-const",
   "addFieldError": "setup-const",
   "scrollWidth": "setup-ref",
-  "handleColumns": "setup-const",
-  "onResize": "setup-const",
-  "onScrollDown": "setup-const",
+  "newColumns": "setup-ref",
   "rightMenu": "setup-const",
   "scrollToById": "setup-const",
   "scrollToByIndex": "setup-const",
@@ -103,33 +94,34 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "groupDelete": "setup-const",
   "groupEdit": "setup-const",
   "getGroupActive": "setup-const",
-  "onHorizontalScroll": "setup-const"
+  "onScrollDown": "setup-const"
 } */
-import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, normalizeClass as _normalizeClass } from "vue";
+import { defineComponent as _defineComponent } from 'vue';
+import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, mergeProps as _mergeProps, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, normalizeClass as _normalizeClass } from "vue";
 const _hoisted_1 = { class: "jetlinks-edit-table-extra" };
 const _hoisted_2 = { class: "jetlinks-edit-table" };
-const _hoisted_3 = {
+const _hoisted_3 = { class: "jetlinks-edit-table-body" };
+const _hoisted_4 = {
     key: 0,
-    class: "jetlinks-table-horizontal-scroll"
+    class: "readonly-mask"
 };
 import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_GROUP_ACTIVE, TABLE_GROUP_ERROR, TABLE_GROUP_OPTIONS, TABLE_H_SCROLL, TABLE_OPEN_GROUP, TABLE_TOOL, TABLE_WRAPPER } from './consts';
-import { handleColumnsWidth } from './utils';
-import { useGroup, useResizeObserver, useValidate } from './hooks';
+import { useGroup, useValidate } from './hooks';
 import { tableProps } from 'ant-design-vue/lib/table';
 import { useFormContext } from './context';
 import { useFullscreen } from '@vueuse/core';
 import { provide, useSlots, ref, reactive, computed, watch } from 'vue';
 import { bodyProps } from "./props";
 import { findIndex, get, sortBy } from 'lodash-es';
-import Header from './Header.js';
-import Body from './Body.js';
 import Group from './group.js';
+import VirtualTable from '../VirtualTable/Table';
 import { useLocaleReceiver } from "../LocaleReciver";
 import useEditTableStyle from './style';
 const defaultGroupId = 'group_1';
-const __sfc_main__ = Object.assign({
-    name: 'JEditTable'
-}, {
+const __sfc_main__ = _defineComponent({
+    ...{
+        name: 'JEditTable'
+    },
     props: {
         ...tableProps(),
         ...bodyProps(),
@@ -140,7 +132,7 @@ const __sfc_main__ = Object.assign({
         serial: {
             type: [Object, Boolean],
             default: () => ({
-                width: 66,
+                width: 70,
                 title: ''
             })
         },
@@ -153,7 +145,7 @@ const __sfc_main__ = Object.assign({
             default: false
         }
     },
-    emits: ['scrollDown', 'rightMenuClick', 'editChange', 'searchVisibleChange'],
+    emits: ['scrollDown', 'rightMenuClick', 'editChange', 'searchVisibleChange', 'groupDelete', 'groupEdit'],
     setup(__props, { expose: __expose, emit: __emit }) {
         const emit = __emit;
         const [contextLocale] = useLocaleReceiver('EditTable');
@@ -161,18 +153,11 @@ const __sfc_main__ = Object.assign({
         const prefixCls = computed(() => 'jetlinks-edit-table');
         const [wrapSSR, hashId] = useEditTableStyle(prefixCls);
         const slots = useSlots();
-        const myColumns = ref([]);
         const tableWrapper = ref();
-        const tableBody = ref();
-        const scrollBarRef = ref();
-        const tableStyle = reactive({
-            width: '100%',
-            height: props.height
-        });
-        const showScroll = ref(false);
-        const horizontalScrollWidth = ref(0);
+        const virtualTableRef = ref();
         const horizontalScrollLeft = ref(0);
-        const fields = {};
+        // 使用 Map 管理字段，性能优于普通对象
+        const fields = new Map();
         const fieldsErrMap = ref({});
         const fieldsGroupError = ref({});
         const scrollDefaultWidth = ref(17);
@@ -183,15 +168,17 @@ const __sfc_main__ = Object.assign({
             dataIndex: undefined
         });
         const { groupActive, groupOptions, addGroup, removeGroup, updateGroupActive, updateGroupOptions } = useGroup(props.openGroup);
+        // 处理数据源
         const _dataSource = computed(() => {
             const _options = new Map();
-            const sortDataSource = sortData.key ?
-                sortBy(props.dataSource, (val) => {
+            const sortDataSource = sortData.key
+                ? sortBy(props.dataSource, (val) => {
                     if (!val.id)
                         return 99999999;
-                    const index = findIndex(sortData.orderKeys, val2 => get(val, sortData.key) === val2);
+                    const index = findIndex(sortData.orderKeys, (val2) => get(val, sortData.key) === val2);
                     return sortData.order === 'desc' ? index : ~index + 1;
-                }) : props.dataSource;
+                })
+                : props.dataSource;
             sortDataSource.forEach((item, index) => {
                 item.__dataIndex = index;
                 if (props.openGroup) {
@@ -206,7 +193,7 @@ const __sfc_main__ = Object.assign({
                             value: _optionalChain([item, 'access', _4 => _4.expands, 'optionalAccess', _5 => _5.groupId]),
                             label: _optionalChain([item, 'access', _6 => _6.expands, 'optionalAccess', _7 => _7.groupName]),
                             effective: item.id ? 1 : 0,
-                            len: 1 // 分组数据总长度
+                            len: 1
                         });
                     }
                     else {
@@ -227,22 +214,30 @@ const __sfc_main__ = Object.assign({
             }
             return sortDataSource;
         });
+        // 按分组过滤的数据
         const bodyDataSource = computed(() => {
             if (props.openGroup) {
-                return _dataSource.value.filter(item => {
+                return _dataSource.value.filter((item) => {
                     return item.expands.groupId === groupActive.value;
                 });
             }
             return _dataSource.value;
         });
-        useResizeObserver(tableWrapper, onResize);
+        const scroll = computed(() => {
+            const _scroll = {
+                y: props.height
+            };
+            if (_optionalChain([props, 'access', _9 => _9.scroll, 'optionalAccess', _10 => _10.x])) {
+                _scroll.x = props.scroll.x;
+            }
+            return _scroll;
+        });
         const { isFullscreen, toggle } = useFullscreen(tableWrapper);
         const { rules, validateItem, validate, errorMap } = useValidate(_dataSource, props.columns, props.rowKey, {
             onError: (err) => {
                 fieldsErrMap.value = {};
                 fieldsGroupError.value = {};
                 const errMap = {};
-                // 显示全部err红标
                 err.forEach((item, errIndex) => {
                     item.forEach((e, eIndex) => {
                         const field = findField(e.__dataIndex, e.field);
@@ -257,7 +252,7 @@ const __sfc_main__ = Object.assign({
                                 updateGroupActive(expands.groupId, expands.groupName);
                             }
                             setTimeout(() => {
-                                tableBody.value.scrollTo(e.__serial - 1);
+                                scrollToByIndex(e.__serial - 1);
                             }, 10);
                         }
                     });
@@ -272,6 +267,7 @@ const __sfc_main__ = Object.assign({
             },
             validateRowKey: props.validateRowKey
         });
+        // Provide context
         provide(TABLE_WRAPPER, tableWrapper);
         provide(FULL_SCREEN, isFullscreen);
         provide(RIGHT_MENU, { click: rightMenu, getPopupContainer: () => tableWrapper.value });
@@ -286,11 +282,11 @@ const __sfc_main__ = Object.assign({
                     updateGroupActive(expands.groupId, expands.groupName);
                 }
                 setTimeout(() => {
-                    tableBody.value.scrollTo(record.__serial);
+                    scrollToByIndex(record.__serial);
                 }, 10);
             },
             selected: (keys) => {
-                tableBody.value.updateSelectedKeys(keys);
+                // VirtualTable 通过 rowSelection.selectedRowKeys 控制选中
             },
             order: (type, key, orderKeys, dataIndex) => {
                 sortData.key = key;
@@ -310,17 +306,20 @@ const __sfc_main__ = Object.assign({
         provide(TABLE_GROUP_ACTIVE, groupActive);
         provide(TABLE_H_SCROLL, horizontalScrollLeft);
         const addField = (key, field) => {
-            fields[key] = field;
+            fields.set(key, field);
         };
         const removeField = (key) => {
-            delete fields[key];
+            fields.delete(key);
         };
         function findField(index, name) {
-            const fieldId = Object.keys(fields).find(key => {
-                const { names } = fields[key];
-                return names[0] === index && names[1] === name;
-            });
-            return fields[fieldId];
+            // 使用 Map 的迭代器，性能更好
+            for (const [key, field] of fields.entries()) {
+                const { names } = field;
+                if (names[0] === index && names[1] === name) {
+                    return field;
+                }
+            }
+            return undefined;
         }
         function removeFieldError(key) {
             delete fieldsErrMap.value[key];
@@ -331,53 +330,39 @@ const __sfc_main__ = Object.assign({
         const scrollWidth = computed(() => {
             return (props.dataSource.length * props.cellHeight) > props.height ? scrollDefaultWidth.value : 0;
         });
-        const handleColumns = () => {
-            let newColumns = [...props.columns];
+        const newColumns = computed(() => {
+            const _columns = [];
             if (props.serial) {
                 const serial = {
                     dataIndex: '__serial',
-                    title: props.serial.title || contextLocale.value.serial,
+                    title: (props.serial).title || contextLocale.value.serial,
                     customRender: (customData) => {
-                        if (_optionalChain([props, 'access', _9 => _9.serial, 'optionalAccess', _10 => _10.customRender])) {
-                            return _optionalChain([props, 'access', _11 => _11.serial, 'optionalAccess', _12 => _12.customRender, 'call', _13 => _13(customData)]);
+                        const record = customData.record;
+                        if (_optionalChain([(props.serial), 'optionalAccess', _11 => _11.customRender])) {
+                            return _optionalChain([(props.serial), 'optionalAccess', _12 => _12.customRender, 'call', _13 => _13(customData)]);
                         }
-                        return customData.index + 1;
+                        return record.__serial;
                     },
-                    width: _optionalChain([props, 'access', _14 => _14.serial, 'optionalAccess', _15 => _15.width]),
+                    width: _optionalChain([(props.serial), 'optionalAccess', _14 => _14.width]),
                     fixed: 'left'
                 };
-                newColumns = [serial, ...props.columns];
+                _columns.push(serial);
             }
-            myColumns.value = handleColumnsWidth(newColumns, tableStyle.width - scrollWidth.value);
-            horizontalScrollWidth.value = myColumns.value.reduce((prev, next) => {
-                prev += next.width;
-                return prev;
-            }, 0);
-            if (horizontalScrollWidth.value > tableStyle.width) {
-                showScroll.value = true;
-            }
-        };
-        function onResize({ width = 0 }) {
-            const _width = width - scrollWidth.value;
-            tableStyle.width = width || '100%';
-            // const viewportDom = document.querySelector('.jetlinks-edit-table-body-viewport')
-            // const viewportDivDom = viewportDom.querySelector('div')
-            //
-            // scrollDefaultWidth.value = viewportDom.offsetWidth - viewportDivDom.offsetWidth
-            handleColumns();
-        }
-        const onScrollDown = (len) => {
-            emit('scrollDown', len);
-        };
+            _columns.push(...props.columns);
+            return _columns;
+        });
         function rightMenu(menuType, record, copyValue) {
             emit('rightMenuClick', menuType, record, copyValue);
         }
         const scrollToById = (key) => {
-            const _index = _dataSource.value.findIndex(item => item[props.rowKey] === key);
-            tableBody.value.scrollTo(_index);
+            const _index = _dataSource.value.findIndex((item) => item[props.rowKey] === key);
+            scrollToByIndex(_index);
         };
         const scrollToByIndex = (index) => {
-            tableBody.value.scrollTo(index);
+            // 通过 VirtualTable 暴露的方法滚动
+            if (virtualTableRef.value) {
+                virtualTableRef.value.scrollToIndex(index);
+            }
         };
         const getTableWrapperRef = () => {
             return tableWrapper.value;
@@ -385,9 +370,9 @@ const __sfc_main__ = Object.assign({
         const groupDelete = (id, index) => {
             removeGroup(index);
             Object.keys(fieldsErrMap.value).forEach(errorKey => {
-                const [index] = errorKey.split('-');
-                const dataSourceItem = _dataSource.value[index];
-                const groupId = _optionalChain([dataSourceItem, 'access', _16 => _16.expands, 'optionalAccess', _17 => _17.groupId]);
+                const [idx] = errorKey.split('-');
+                const dataSourceItem = _dataSource.value[parseInt(idx)];
+                const groupId = _optionalChain([dataSourceItem, 'optionalAccess', _15 => _15.expands, 'optionalAccess', _16 => _16.groupId]);
                 if (groupId === id) {
                     removeFieldError(errorKey);
                     removeField(errorKey);
@@ -401,9 +386,11 @@ const __sfc_main__ = Object.assign({
         const getGroupActive = () => {
             return groupActive.value;
         };
-        const onHorizontalScroll = (e) => {
-            horizontalScrollLeft.value = scrollBarRef.value.scrollLeft;
+        // VirtualTable 滚动到底部事件
+        const onScrollDown = () => {
+            emit('scrollDown');
         };
+        // 监听错误变化
         watch(() => fieldsErrMap.value, (errorMap) => {
             fieldsGroupError.value = {};
             if (props.openGroup) {
@@ -411,8 +398,8 @@ const __sfc_main__ = Object.assign({
                 const groupErrorMap = {};
                 Object.keys(_errorObj).forEach(errorKey => {
                     const [index] = errorKey.split('-');
-                    const dataSourceItem = _dataSource.value[index];
-                    const groupId = _optionalChain([dataSourceItem, 'access', _18 => _18.expands, 'optionalAccess', _19 => _19.groupId]);
+                    const dataSourceItem = _dataSource.value[parseInt(index)];
+                    const groupId = _optionalChain([dataSourceItem, 'optionalAccess', _17 => _17.expands, 'optionalAccess', _18 => _18.groupId]);
                     const groupError = groupErrorMap[groupId];
                     const groupErrorItem = {
                         [errorKey]: {
@@ -431,16 +418,8 @@ const __sfc_main__ = Object.assign({
                 fieldsGroupError.value = groupErrorMap;
             }
         }, { deep: true });
-        watch(() => scrollWidth.value, () => {
-            onResize({ width: tableStyle.width });
-        });
-        watch(() => [JSON.stringify(props.columns), tableStyle.width], () => {
-            handleColumns();
-        });
         useFormContext({
-            dataSource: computed(() => {
-                return props.dataSource;
-            }),
+            dataSource: computed(() => props.dataSource),
             errorMap,
             rules,
             addField,
@@ -474,72 +453,36 @@ const __sfc_main__ = Object.assign({
                     })
                 ]),
                 _createElementVNode("div", _hoisted_2, [
-                    _createElementVNode("div", {
-                        class: "jetlinks-edit-table-header",
-                        style: _normalizeStyle([{ "height": "50px" }, { paddingRight: scrollWidth.value + 'px' }])
-                    }, [
-                        _createVNode(Header, {
-                            columns: myColumns.value,
-                            searchColumns: __props.searchColumns,
-                            style: _normalizeStyle({ width: tableStyle.width, transform: `translateX(-${horizontalScrollLeft.value}px)` })
-                        }, null, 8 /* PROPS */, ["columns", "searchColumns", "style"])
-                    ], 4 /* STYLE */),
-                    _createElementVNode("div", {
-                        class: "jetlinks-edit-table-body",
-                        style: _normalizeStyle({ width: tableStyle.width, height: `${_ctx.height}px` })
-                    }, [
-                        _createVNode(Body, {
-                            ref_key: "tableBody",
-                            ref: tableBody,
-                            dataSource: bodyDataSource.value,
-                            columns: myColumns.value,
-                            cellHeight: _ctx.cellHeight,
-                            height: _ctx.height,
-                            disableMenu: _ctx.disableMenu,
-                            rowKey: _ctx.rowKey,
-                            groupKey: _unref(groupActive).value,
-                            openGroup: _ctx.openGroup,
-                            rowSelection: _ctx.rowSelection,
-                            readonly: __props.readonly,
-                            width: horizontalScrollWidth.value,
-                            onScrollDown: onScrollDown
-                        }, _createSlots({ _: 2 /* DYNAMIC */ }, [
-                            _renderList(_unref(slots), (_, name) => {
-                                return {
-                                    name: name,
-                                    fn: _withCtx((slotData) => [
-                                        _renderSlot(_ctx.$slots, name, _normalizeProps(_guardReactiveProps(slotData || {})))
-                                    ])
-                                };
-                            })
-                        ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["dataSource", "columns", "cellHeight", "height", "disableMenu", "rowKey", "groupKey", "openGroup", "rowSelection", "readonly", "width"]),
+                    _createElementVNode("div", _hoisted_3, [
+                        _createVNode(_unref(VirtualTable), _mergeProps(props, {
+                            "data-source": bodyDataSource.value,
+                            columns: newColumns.value,
+                            scroll: scroll.value,
+                            pagination: false,
+                            virtual: {
+                                itemHeight: props.cellHeight,
+                                overscan: 1,
+                                threshold: props.height / props.cellHeight
+                            }
+                        }), {
+                            bodyCell: _withCtx(({ column, record }) => [
+                                _renderSlot(_ctx.$slots, column.dataIndex, {
+                                    column: column,
+                                    record: record
+                                })
+                            ]),
+                            _: 3 /* FORWARDED */
+                        }, 16 /* FULL_PROPS */, ["data-source", "columns", "scroll", "virtual"]),
+                        (__props.readonly)
+                            ? (_openBlock(), _createElementBlock("div", _hoisted_4))
+                            : _createCommentVNode("v-if", true),
                         _renderSlot(_ctx.$slots, "bodyExtra")
-                    ], 4 /* STYLE */),
-                    (showScroll.value)
-                        ? (_openBlock(), _createElementBlock("div", _hoisted_3, [
-                            _createElementVNode("div", {
-                                class: "jetlinks-table-horizontal-scroll-bar",
-                                ref_key: "scrollBarRef",
-                                ref: scrollBarRef,
-                                style: {
-                                    width: 'calc(100% - 15px)',
-                                    height: '100%',
-                                    overflowX: 'scroll'
-                                },
-                                onScroll: onHorizontalScroll
-                            }, [
-                                _createElementVNode("div", {
-                                    style: _normalizeStyle({ minWidth: horizontalScrollWidth.value + 'px', maxWidth: horizontalScrollWidth.value + 'px', height: '100%' })
-                                }, null, 4 /* STYLE */)
-                            ], 544 /* NEED_HYDRATION, NEED_PATCH */),
-                            _cache[1] || (_cache[1] = _createElementVNode("div", { style: { "width": "15px", "height": "100%", "overflow-x": "hidden" } }, null, -1 /* CACHED */))
-                        ]))
-                        : _createCommentVNode("v-if", true),
+                    ]),
                     (_ctx.dataSource.length && _ctx.openGroup)
                         ? (_openBlock(), _createBlock(Group, {
-                            key: 1,
+                            key: 0,
                             activeKey: _unref(groupActive).value,
-                            "onUpdate:activeKey": _cache[0] || (_cache[0] = $event => ((_unref(groupActive).value) = $event)),
+                            "onUpdate:activeKey": _cache[0] || (_cache[0] = ($event) => ((_unref(groupActive).value) = $event)),
                             options: _unref(groupOptions),
                             readonly: __props.readonly,
                             onAdd: _unref(addGroup),