uview-ultra 4.5.46

package/components/up-table2/up-table2.uvue

@@ -0,0 +1,1504 @@
+<template>
+    <view class="up-table2" :class="border ? 'up-table-border' : ''">
+        <!-- #ifdef APP -->
+        <scroll-view direction="horizontal" class="up-table2-scroll" :style="getScrollStyle()" @scroll="onScroll">
+        <!-- #endif -->
+        <!-- #ifndef APP -->
+        <view class="up-table2-scroll up-table2-scroll-h5" :style="getScrollStyle()" @scroll="onScrollRaw">
+        <!-- #endif -->
+            <view class="up-table2-content" :style="getTableContentStyle()">
+                <view v-if="showHeader" class="up-table-row up-table-header-row">
+                    <view
+                        v-for="(col, colIndex) in columns"
+                        :key="getColumnKey(col, colIndex)"
+                        class="up-table-cell up-table-header-cell"
+                        :class="[getHeaderAlignClass(col), getHeaderCellExtraClass(colIndex, columns.length)]"
+                        :style="getHeaderCellStyle(col)"
+                        @click="handleHeaderClick(col)"
+                    >
+                        <view v-if="isSelectionColumn(col)">
+                            <checkbox :checked="isAllSelected()" @click.stop="toggleSelectAll" />
+                        </view>
+                        <template v-else>
+                            <text class="up-table-header-text">{{ getColumnTitle(col) }}</text>
+                            <text v-if="isSortableColumn(col)" class="up-table-sort-icon">{{ getSortIcon(col) }}</text>
+                        </template>
+                    </view>
+                </view>
+
+                <view v-if="hasData" class="up-table-body" :style="getBodyStyle()">
+                    <view
+                        v-for="(item, flatIndex) in flatRows"
+                        :key="getRowKey(item['row'] as UTSJSONObject, flatIndex)"
+                        class="up-table-row up-table-body-row"
+                        :class="getRowClass(item['row'] as UTSJSONObject, flatIndex)"
+                        :style="{ height: rowHeightValue }"
+                        @click="handleRowClick(item['row'] as UTSJSONObject)"
+                    >
+                        <view
+                            v-for="(cell, idx) in getRowCells(item['row'] as UTSJSONObject, safeToNumber(item['rowIndex']))"
+                            :key="getColumnKey(cell['col'] as UTSJSONObject, safeToNumber(cell['colIndex']))"
+                            class="up-table-cell"
+                            :class="[getCellAlignClass(cell['col'] as UTSJSONObject), getCellClassName(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject), getCellSpanClass(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject, safeToNumber(item['rowIndex']), safeToNumber(cell['colIndex']))]"
+                            :style="getCellStyle(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject, safeToNumber(item['rowIndex']), safeToNumber(cell['colIndex']), safeToNumber(item['level'], 1))"
+                        >
+                            <view v-if="isSelectionColumn(cell['col'] as UTSJSONObject)">
+                                <checkbox :checked="isSelected(item['row'] as UTSJSONObject)" @click.stop="toggleSelect(item['row'] as UTSJSONObject)" />
+                            </view>
+                            <template v-else>
+                                <view
+                                    v-if="showTreeIcon(cell['col'] as UTSJSONObject, item['row'] as UTSJSONObject)"
+                                    class="up-table-tree-toggle"
+                                    :style="{ width: expandWidthValue }"
+                                    @click.stop="toggleExpand(item['row'] as UTSJSONObject)"
+                                >
+                                    <text>{{ isExpanded(item['row'] as UTSJSONObject) ? '-' : '+' }}</text>
+                                </view>
+                                <slot
+                                    name="cell"
+                                    :row="item['row'] as UTSJSONObject"
+                                    :column="cell['col'] as UTSJSONObject"
+                                    :prow="item['parentRow'] as UTSJSONObject | null"
+                                    :rowIndex="safeToNumber(item['rowIndex'])"
+                                    :columnIndex="safeToNumber(cell['colIndex'])"
+                                    :level="safeToNumber(item['level'], 1)"
+                                >
+                                    <text :class="getCellTextClass(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject, safeToNumber(item['rowIndex']), safeToNumber(cell['colIndex']))">{{ getCellText(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject) }}</text>
+                                </slot>
+                            </template>
+                        </view>
+                    </view>
+                </view>
+
+                <view v-else class="up-table-empty">
+                    <slot name="empty">
+                        <text>{{ emptyText }}</text>
+                    </slot>
+                </view>
+            </view>
+        <!-- #ifdef APP -->
+        </scroll-view>
+        <!-- #endif -->
+        <!-- #ifndef APP -->
+        </view>
+        <!-- #endif -->
+
+        <view v-if="showFixedShadow" class="up-table-fixed-shadow" :style="getFixedShadowStyle()">
+            <view v-if="showHeader" class="up-table-row up-table-header-row">
+                <view
+                    v-for="(col, fixedIndex) in fixedLeftColumns"
+                    :key="getColumnKey(col, fixedIndex)"
+                    class="up-table-cell up-table-header-cell"
+                    :class="[getHeaderAlignClass(col), getHeaderCellExtraClass(fixedIndex, fixedLeftColumns.length)]"
+                    :style="getFixedHeaderCellStyle(col)"
+                    @click="handleHeaderClick(col)"
+                >
+                    <view v-if="isSelectionColumn(col)">
+                        <checkbox :checked="isAllSelected()" @click.stop="toggleSelectAll" />
+                    </view>
+                    <template v-else>
+                        <text class="up-table-header-text">{{ getColumnTitle(col) }}</text>
+                        <text v-if="isSortableColumn(col)" class="up-table-sort-icon">{{ getSortIcon(col) }}</text>
+                    </template>
+                </view>
+            </view>
+
+            <view v-if="hasData" class="up-table-body" :style="getBodyStyle()">
+                <view
+                    v-for="(item, flatIndex) in flatRows"
+                    :key="'fixed_' + getRowKey(item['row'] as UTSJSONObject, flatIndex)"
+                    class="up-table-row up-table-body-row"
+                    :class="getRowClass(item['row'] as UTSJSONObject, flatIndex)"
+                    :style="{ height: rowHeightValue }"
+                    @click="handleRowClick(item['row'] as UTSJSONObject)"
+                >
+                    <view
+                        v-for="(cell, idx) in getFixedRowCells(item['row'] as UTSJSONObject, safeToNumber(item['rowIndex']))"
+                        :key="'fixed_' + getColumnKey(cell['col'] as UTSJSONObject, safeToNumber(cell['colIndex']))"
+                        class="up-table-cell"
+                        :class="[getCellAlignClass(cell['col'] as UTSJSONObject), getCellClassName(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject), getCellSpanClass(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject, safeToNumber(item['rowIndex']), safeToNumber(cell['colIndex']))]"
+                        :style="getFixedCellStyle(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject, safeToNumber(item['rowIndex']), safeToNumber(cell['colIndex']), safeToNumber(item['level'], 1))"
+                    >
+                        <view v-if="isSelectionColumn(cell['col'] as UTSJSONObject)">
+                            <checkbox :checked="isSelected(item['row'] as UTSJSONObject)" @click.stop="toggleSelect(item['row'] as UTSJSONObject)" />
+                        </view>
+                        <template v-else>
+                            <view
+                                v-if="showTreeIcon(cell['col'] as UTSJSONObject, item['row'] as UTSJSONObject)"
+                                class="up-table-tree-toggle"
+                                :style="{ width: expandWidthValue }"
+                                @click.stop="toggleExpand(item['row'] as UTSJSONObject)"
+                            >
+                                <text>{{ isExpanded(item['row'] as UTSJSONObject) ? '-' : '+' }}</text>
+                            </view>
+                            <!-- 固定列浮动视图直接内联渲染，不使用 slot，避免与主表体 slot name="cell" 重名报错 -->
+                            <text :class="getCellTextClass(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject, safeToNumber(item['rowIndex']), safeToNumber(cell['colIndex']))">{{ getCellText(item['row'] as UTSJSONObject, cell['col'] as UTSJSONObject) }}</text>
+                        </template>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="uts">
+import type { PropType } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+
+function createRowList(): UTSJSONObject[] {
+    return [] as UTSJSONObject[];
+}
+
+function createStringList(): string[] {
+    return [] as string[];
+}
+
+function createEmptyObject(): UTSJSONObject {
+    return {} as UTSJSONObject;
+}
+
+function createTreeProps(): UTSJSONObject {
+    return {
+        children: 'children',
+        hasChildren: 'hasChildren'
+    } as UTSJSONObject;
+}
+
+function createSpan(rowspan: number = 1, colspan: number = 1): UTSJSONObject {
+    return {
+        rowspan: rowspan,
+        colspan: colspan
+    } as UTSJSONObject;
+}
+
+function createSpanArray(): number[] {
+    return [1, 1] as number[];
+}
+
+function valueToString(value: any | null): string {
+    return value == null ? '' : value.toString();
+}
+
+function toNumber(value: any | null, fallback: number = 0): number {
+    if (value == null) {
+        return fallback;
+    }
+    const text = valueToString(value);
+    if (text == '') {
+        return fallback;
+    }
+    const parsed = parseInt(text);
+    return isNaN(parsed) ? fallback : parsed;
+}
+
+function normalizeColumnWidth(value: any | null): number {
+    const width = toNumber(value, 80);
+    return width < 80 ? 80 : width;
+}
+
+function addUnitLocal(value: any | null): string {
+    if (value == null) {
+        return 'auto';
+    }
+    const text = valueToString(value);
+    if (text == '') {
+        return 'auto';
+    }
+    if (text.endsWith('px') || text.endsWith('%') || text.endsWith('rpx')) {
+        return text;
+    }
+    const numeric = /^-?\d+(\.\d+)?$/.test(text);
+    return numeric ? (text + 'px') : text;
+}
+
+function getTableMinWidthPx(): number {
+    return 375;
+}
+
+type SpanMethodCallback = (scope: UTSJSONObject) => any;
+type CellStyleCallback = (scope: UTSJSONObject) => UTSJSONObject | null;
+type CellClassNameCallback = (row: UTSJSONObject, col: UTSJSONObject) => string;
+type RowClassNameCallback = (row: UTSJSONObject, rowIndex: number) => string;
+type HeaderCellClassNameCallback = (col: UTSJSONObject) => string;
+
+defineOptions({
+    styleIsolation: 'app-and-page',
+    name: 'up-table2'
+})
+
+const props = defineProps({
+    data: {
+        type: Array as PropType<UTSJSONObject[]>,
+        required: true,
+        default(): UTSJSONObject[] {
+            return [] as UTSJSONObject[];
+        }
+    },
+    columns: {
+        type: Array as PropType<UTSJSONObject[]>,
+        required: true,
+        default(): UTSJSONObject[] {
+            return [] as UTSJSONObject[];
+        }
+    },
+    rowKey: {
+        type: String,
+        default: 'id'
+    },
+    border: {
+        type: Boolean,
+        default: false
+    },
+    stripe: {
+        type: Boolean,
+        default: false
+    },
+    height: {
+        type: [String, Number],
+        default: null
+    },
+    maxHeight: {
+        type: [String, Number],
+        default: null
+    },
+    showHeader: {
+        type: Boolean,
+        default: true
+    },
+    emptyText: {
+        type: String,
+        default: 'No Data'
+    },
+    sortable: {
+        type: Boolean,
+        default: false
+    },
+    multiSort: {
+        type: Boolean,
+        default: false
+    },
+    filters: {
+        type: Object as PropType<UTSJSONObject>,
+        default(): UTSJSONObject {
+            return {} as UTSJSONObject;
+        }
+    },
+    highlightCurrentRow: {
+        type: Boolean,
+        default: false
+    },
+    currentRowKey: {
+        type: [String, Number],
+        default: null
+    },
+    treeProps: {
+        type: Object as PropType<UTSJSONObject>,
+        default(): UTSJSONObject {
+            return {
+                children: 'children',
+                hasChildren: 'hasChildren'
+            } as UTSJSONObject;
+        }
+    },
+    expandRowKeys: {
+        type: Array as PropType<any[]>,
+        default(): any[] {
+            return [] as any[];
+        }
+    },
+    rowHeight: {
+        type: [String, Number],
+        default: 44
+    },
+    expandWidth: {
+        type: [String, Number],
+        default: 24
+    },
+    mainCol: {
+        type: String,
+        default: ''
+    },
+    fixedHeader: {
+        type: Boolean,
+        default: false
+    },
+    spanMethod: {
+        type: Function as PropType<SpanMethodCallback | null>,
+        default: null
+    },
+    cellStyle: {
+        type: Function as PropType<CellStyleCallback | null>,
+        default: null
+    },
+    cellClassName: {
+        type: Function as PropType<CellClassNameCallback | null>,
+        default: null
+    },
+    rowClassName: {
+        type: Function as PropType<RowClassNameCallback | null>,
+        default: null
+    },
+    headerCellClassName: {
+        type: Function as PropType<HeaderCellClassNameCallback | null>,
+        default: null
+    }
+})
+
+const emit = defineEmits([
+    'row-click',
+    'header-click',
+    'selection-change',
+    'select',
+    'select-all',
+    'sort-change',
+    'filter-change',
+    'expand-change',
+    'current-change'
+])
+
+const expandedKeys = ref(createStringList())
+const selectedKeys = ref(createStringList())
+const sortKey = ref('')
+const sortOrder = ref('')
+const currentRowValue = ref('')
+const scrollLeftValue = ref(0)
+
+function getColumnField(col: UTSJSONObject): string {
+    return valueToString(col['key']);
+}
+
+function isSelectionColumn(col: UTSJSONObject): boolean {
+    return valueToString(col['type']) == 'selection';
+}
+
+function normalizeKey(value: any | null): string {
+    return valueToString(value);
+}
+
+function getChildrenKey(): string {
+    const tree = props.treeProps as UTSJSONObject | null;
+    if (tree == null) {
+        return 'children';
+    }
+    const key = tree['children'];
+    return valueToString(key) == '' ? 'children' : valueToString(key);
+}
+
+function getRowKeyValue(row: UTSJSONObject): string {
+    return normalizeKey(row[props.rowKey]);
+}
+
+function getRowKey(row: UTSJSONObject, index: number): string {
+    const key = getRowKeyValue(row);
+    return key == '' ? index.toString() : key;
+}
+
+function isExpanded(row: UTSJSONObject): boolean {
+    const key = getRowKeyValue(row);
+    if (key == '') {
+        return false;
+    }
+    const expandedKeyList = expandedKeys.value as string[];
+    return expandedKeyList.indexOf(key) > -1;
+}
+
+function collectFlatRows(rows: UTSJSONObject[], parentRow: UTSJSONObject | null, level: number, result: UTSJSONObject[]): void {
+    if (!Array.isArray(rows) || rows.length == 0) {
+        return;
+    }
+    const childrenKey = getChildrenKey();
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i] as UTSJSONObject;
+        result.push({
+            row: row,
+            parentRow: parentRow,
+            level: level,
+            rowIndex: i
+        } as UTSJSONObject);
+        const children = row[childrenKey] as UTSJSONObject[] | null;
+        if (children != null && children.length > 0 && isExpanded(row)) {
+            collectFlatRows(children, row, level + 1, result);
+        }
+    }
+}
+
+function normalizeFilters(value: any | null): UTSJSONObject {
+    if (value == null) {
+        return {} as UTSJSONObject;
+    }
+    return value as UTSJSONObject;
+}
+
+function applyFilters(rows: UTSJSONObject[]): UTSJSONObject[] {
+    if (!Array.isArray(rows) || rows.length == 0) {
+        return createRowList();
+    }
+    const filters = normalizeFilters(props.filters);
+    const filterKeys = UTSJSONObject.keys(filters);
+    if (filterKeys.length == 0) {
+        return rows.slice();
+    }
+    const result = createRowList();
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i] as UTSJSONObject;
+        let matched = true;
+        for (let j = 0; j < filterKeys.length; j++) {
+            const filterKey = filterKeys[j];
+            const filterValue = filters[filterKey];
+            const filterText = valueToString(filterValue);
+            if (filterText == '') {
+                continue;
+            }
+            const rowText = valueToString(row[filterKey]);
+            if (rowText.indexOf(filterText) == -1) {
+                matched = false;
+                break;
+            }
+        }
+        if (matched) {
+            result.push(row);
+        }
+    }
+    return result;
+}
+
+function compareRows(a: UTSJSONObject, b: UTSJSONObject): number {
+    const key = sortKey.value;
+    if (key == '') {
+        return 0;
+    }
+    const textA = valueToString(a[key]);
+    const textB = valueToString(b[key]);
+    let result = 0;
+    const numberA = parseFloat(textA);
+    const numberB = parseFloat(textB);
+    const bothNumeric = !isNaN(numberA) && !isNaN(numberB);
+    if (bothNumeric) {
+        result = numberA > numberB ? 1 : (numberA < numberB ? -1 : 0);
+    } else {
+        result = textA > textB ? 1 : (textA < textB ? -1 : 0);
+    }
+    return sortOrder.value == 'descending' ? -result : result;
+}
+
+function applySort(rows: UTSJSONObject[]): UTSJSONObject[] {
+    if (!Array.isArray(rows) || rows.length == 0) {
+        return createRowList();
+    }
+    if (sortKey.value == '' || sortOrder.value == '') {
+        return rows.slice();
+    }
+    const data = rows.slice();
+    data.sort((a: UTSJSONObject, b: UTSJSONObject): number => {
+        return compareRows(a, b);
+    });
+    return data;
+}
+
+const rowHeightValue = computed((): string => {
+    return addUnitLocal(props.rowHeight);
+})
+
+const expandWidthValue = computed((): string => {
+    return addUnitLocal(props.expandWidth);
+})
+
+const mainColumnKey = computed((): string => {
+    if (props.mainCol != null && props.mainCol != '') {
+        return props.mainCol;
+    }
+    const cols = props.columns as UTSJSONObject[];
+    for (let i = 0; i < cols.length; i++) {
+        const col = cols[i] as UTSJSONObject;
+        if (!isSelectionColumn(col)) {
+            const key = getColumnField(col);
+            if (key != '') {
+                return key;
+            }
+        }
+    }
+    return '';
+})
+
+const processedData = computed((): UTSJSONObject[] => {
+    const rows = props.data as UTSJSONObject[];
+    const filtered = applyFilters(rows);
+    return applySort(filtered);
+})
+
+const flatRows = computed((): UTSJSONObject[] => {
+    const result = createRowList();
+    collectFlatRows(processedData.value as UTSJSONObject[], null, 1, result);
+    return result;
+})
+
+const hasData = computed((): boolean => {
+    return flatRows.value.length > 0;
+})
+
+const hasTree = computed((): boolean => {
+    const childrenKey = getChildrenKey();
+    const rows = processedData.value as UTSJSONObject[];
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i] as UTSJSONObject;
+        const children = row[childrenKey] as UTSJSONObject[] | null;
+        if (Array.isArray(children) && children!!.length > 0) {
+            return true;
+        }
+    }
+    return false;
+})
+
+const fixedLeftColumns = computed((): UTSJSONObject[] => {
+    const result = createRowList();
+    const cols = props.columns as UTSJSONObject[];
+    let started = false;
+    for (let i = 0; i < cols.length; i++) {
+        const col = cols[i] as UTSJSONObject;
+        if (valueToString(col['fixed']) == 'left') {
+            result.push(col);
+            started = true;
+        } else if (started) {
+            break;
+        }
+    }
+    return result;
+})
+
+const showFixedShadow = computed((): boolean => {
+    return scrollLeftValue.value > 0 && (fixedLeftColumns.value as UTSJSONObject[]).length > 0;
+})
+
+function getTableContentWidthValue(): number {
+    const cols = props.columns as UTSJSONObject[];
+    let total = 0;
+    for (let i = 0; i < cols.length; i++) {
+        total += normalizeColumnWidth((cols[i] as UTSJSONObject)['width']);
+    }
+    const minWidth = getTableMinWidthPx();
+    return total > 0 ? Math.max(total, minWidth) : minWidth;
+}
+
+function getTableContentWidth(): string {
+    return getTableContentWidthValue().toString() + 'px';
+}
+
+function getTableContentStyle(): UTSJSONObject {
+    const style = createEmptyObject();
+    const contentWidth = getTableContentWidth();
+    // #ifdef APP
+    style['width'] = '100%';
+    style['minWidth'] = contentWidth;
+    // #endif
+    // #ifndef APP
+    style['width'] = contentWidth;
+    style['minWidth'] = contentWidth;
+    // #endif
+    return style;
+}
+
+function getColumnWidthNumber(col: UTSJSONObject): number {
+    const cols = props.columns as UTSJSONObject[];
+    let total = 0;
+    for (let i = 0; i < cols.length; i++) {
+        total += normalizeColumnWidth((cols[i] as UTSJSONObject)['width']);
+    }
+    const width = normalizeColumnWidth(col['width']);
+    if (total <= 0) {
+        return width;
+    }
+    const contentWidth = Math.max(total, getTableMinWidthPx());
+    return Math.floor(width * contentWidth / total);
+}
+
+function getColumnWidth(col: UTSJSONObject): string {
+    return getColumnWidthNumber(col).toString() + 'px';
+}
+
+function safeToNumber(value: any | null, fallback: number = 0): number {
+    return toNumber(value, fallback);
+}
+
+function normalizeKeys(keys: any[] | null): string[] {
+    const result = createStringList();
+    if (keys == null) {
+        return result;
+    }
+    for (let i = 0; i < keys.length; i++) {
+        result.push(normalizeKey(keys[i]));
+    }
+    return result;
+}
+
+function getColumnKey(col: UTSJSONObject, index: number): string {
+    const key = getColumnField(col);
+    if (key != '') {
+        return key;
+    }
+    const typeText = valueToString(col['type']);
+    return typeText == '' ? ('col_' + index.toString()) : (typeText + '_' + index.toString());
+}
+
+function getColumnIndex(col: UTSJSONObject): number {
+    const cols = props.columns as UTSJSONObject[];
+    for (let i = 0; i < cols.length; i++) {
+        if ((cols[i] as UTSJSONObject) === col) {
+            return i;
+        }
+    }
+    return 0;
+}
+
+function getColumnTitle(col: UTSJSONObject): string {
+    return valueToString(col['title']);
+}
+
+function isSortableColumn(col: UTSJSONObject): boolean {
+    if (isSelectionColumn(col)) {
+        return false;
+    }
+    if (props.sortable) {
+        return true;
+    }
+    const colSortable = valueToString(col['sortable']);
+    return colSortable == 'true' || colSortable == '1';
+}
+
+function getHeaderAlignClass(col: UTSJSONObject): string {
+    const headerAlign = valueToString(col['headerAlign']);
+    if (headerAlign == 'center' || headerAlign == 'right' || headerAlign == 'left') {
+        return 'up-text-' + headerAlign;
+    }
+    const align = valueToString(col['align']);
+    if (align == 'center' || align == 'right' || align == 'left') {
+        return 'up-text-' + align;
+    }
+    return 'up-text-left';
+}
+
+function getCellAlignClass(col: UTSJSONObject): string {
+    const align = valueToString(col['align']);
+    if (align == 'center' || align == 'right' || align == 'left') {
+        return 'up-text-' + align;
+    }
+    return 'up-text-left';
+}
+
+function getCellClassName(row: UTSJSONObject, col: UTSJSONObject): string {
+    if (props.cellClassName == null) {
+        return '';
+    }
+    const callback = props.cellClassName as CellClassNameCallback;
+    const result = callback(row, col);
+    return valueToString(result);
+}
+
+function getFixedLeftOffset(col: UTSJSONObject): number {
+    if (valueToString(col['fixed']) != 'left') {
+        return 0;
+    }
+    const cols = props.columns as UTSJSONObject[];
+    let left = 0;
+    for (let i = 0; i < cols.length; i++) {
+        const current = cols[i] as UTSJSONObject;
+        if (current === col) {
+            break;
+        }
+        if (valueToString(current['fixed']) == 'left') {
+            left += getColumnWidthNumber(current);
+        }
+    }
+    return left;
+}
+
+function getHeaderCellStyle(col: UTSJSONObject): UTSJSONObject {
+    const style = createEmptyObject();
+    style['width'] = getColumnWidth(col);
+    return style;
+}
+
+function getFixedHeaderCellStyle(col: UTSJSONObject): UTSJSONObject {
+    const style = getHeaderCellStyle(col);
+    style['backgroundColor'] = '#f5f7fa';
+    return style;
+}
+
+function getSpanValue(value: any | null, fallback: number = 1): number {
+    if (value == null || valueToString(value) == '') {
+        return fallback;
+    }
+    const parsed = parseInt(value.toString());
+    return isNaN(parsed) ? fallback : parsed;
+}
+
+function getCellSpanArray(row: UTSJSONObject, column: UTSJSONObject, rowIndex: number, columnIndex: number): number[] {
+    if (typeof props.spanMethod !== 'function' || props.spanMethod == null) {
+        return createSpanArray();
+    }
+    const callback = props.spanMethod as SpanMethodCallback;
+    const result = callback({
+        row: row,
+        column: column,
+        rowIndex: rowIndex,
+        columnIndex: columnIndex
+    } as UTSJSONObject);
+    if (Array.isArray(result)) {
+        const arr = result as number[];
+        const rowspan = arr.length > 0 ? getSpanValue(arr[0], 1) : 1;
+        const colspan = arr.length > 1 ? getSpanValue(arr[1], 1) : 1;
+        return [rowspan, colspan] as number[];
+    }
+    const spanObject = result as UTSJSONObject | null;
+    if (spanObject != null) {
+        const rowspan = getSpanValue(spanObject['rowspan'], 1);
+        const colspan = getSpanValue(spanObject['colspan'], 1);
+        return [rowspan, colspan] as number[];
+    }
+    return createSpanArray();
+}
+
+function getCellSpan(row: UTSJSONObject, column: UTSJSONObject, rowIndex: number, columnIndex: number): UTSJSONObject {
+    const span = getCellSpanArray(row, column, rowIndex, columnIndex);
+    const rowspan = span.length > 0 ? span[0] : 1;
+    const colspan = span.length > 1 ? span[1] : 1;
+    return createSpan(rowspan, colspan);
+}
+
+function getCellSpanStyle(row: UTSJSONObject, column: UTSJSONObject, rowIndex: number, columnIndex: number): UTSJSONObject {
+    const span = getCellSpan(row, column, rowIndex, columnIndex);
+    const style = createEmptyObject();
+    const rowspan = span['rowspan'] as number;
+    const colspan = span['colspan'] as number;
+    if (rowspan == 0 || colspan == 0) {
+        return style;
+    }
+    if (rowspan > 1) {
+        const rowHeight = toNumber(props.rowHeight, 44);
+        style['height'] = (rowspan * rowHeight).toString() + 'px';
+    }
+    if (colspan > 1) {
+        const cols = props.columns as UTSJSONObject[];
+        let width = 0;
+        for (let i = columnIndex; i < columnIndex + colspan && i < cols.length; i++) {
+            width += getColumnWidthNumber(cols[i] as UTSJSONObject);
+        }
+        style['width'] = width.toString() + 'px';
+    }
+    return style;
+}
+
+function isMainColumn(col: UTSJSONObject): boolean {
+    const field = getColumnField(col);
+    return field != '' && field == mainColumnKey.value;
+}
+
+function getBaseCellStyle(row: UTSJSONObject, col: UTSJSONObject, rowIndex: number, columnIndex: number, level: number): UTSJSONObject {
+    const style = createEmptyObject();
+    const spanStyle = getCellSpanStyle(row, col, rowIndex, columnIndex);
+    const spanKeys = UTSJSONObject.keys(spanStyle);
+    if (spanKeys.indexOf('width') == -1) {
+        style['width'] = getColumnWidth(col);
+    }
+    if (hasTree.value && isMainColumn(col) && level > 1) {
+        style['paddingLeft'] = ((level - 1) * 16).toString() + 'px';
+    }
+    const colStyle = col['style'] as UTSJSONObject | null;
+    if (colStyle != null) {
+        const keys = UTSJSONObject.keys(colStyle);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (key == 'color' || key == 'textAlign' || key == 'text-align') {
+                continue;
+            }
+            style[key] = colStyle[key];
+        }
+    }
+    for (let i = 0; i < spanKeys.length; i++) {
+        const key = spanKeys[i];
+        style[key] = spanStyle[key];
+    }
+    return style;
+}
+
+function getCellStyle(row: UTSJSONObject, col: UTSJSONObject, rowIndex: number, columnIndex: number, level: number): UTSJSONObject {
+    return getBaseCellStyle(row, col, rowIndex, columnIndex, level);
+}
+
+function getFixedCellStyle(row: UTSJSONObject, col: UTSJSONObject, rowIndex: number, columnIndex: number, level: number): UTSJSONObject {
+    const style = getBaseCellStyle(row, col, rowIndex, columnIndex, level);
+    style['backgroundColor'] = '#ffffff';
+    return style;
+}
+
+function getCellSpanClass(row: UTSJSONObject, column: UTSJSONObject, rowIndex: number, columnIndex: number): string {
+    const classes = [] as string[];
+    classes.push('up-table-cell--body');
+    if (props.border) {
+        classes.push('up-table-cell--border');
+    }
+    const cols = props.columns as UTSJSONObject[];
+    if (columnIndex == cols.length - 1) {
+        classes.push('up-table-cell--last');
+    }
+    const span = getCellSpan(row, column, rowIndex, columnIndex);
+    if ((span['rowspan'] as number) == 0 || (span['colspan'] as number) == 0) {
+        classes.push('up-table-cell-hidden');
+    } else if ((span['rowspan'] as number) > 1 || (span['colspan'] as number) > 1) {
+        classes.push('up-table-cell-merged');
+    }
+    return classes.join(' ');
+}
+
+function getHeaderCellExtraClass(colIndex: number, colCount: number): string {
+    const classes = [] as string[];
+    if (props.border) {
+        classes.push('up-table-cell--border');
+    }
+    if (colCount > 0 && colIndex == colCount - 1) {
+        classes.push('up-table-cell--last');
+    }
+    return classes.join(' ');
+}
+
+function getCellTextClass(row: UTSJSONObject, column: UTSJSONObject, rowIndex: number, columnIndex: number): string {
+    const span = getCellSpan(row, column, rowIndex, columnIndex);
+    if ((span['rowspan'] as number) > 1 || (span['colspan'] as number) > 1) {
+        return 'up-table-cell-text up-table-cell-text--merged';
+    }
+    return 'up-table-cell-text';
+}
+
+function isHiddenBySameRowColspan(row: UTSJSONObject, rowIndex: number, columnIndex: number): boolean {
+    const cols = props.columns as UTSJSONObject[];
+    for (let i = 0; i < columnIndex && i < cols.length; i++) {
+        const span = getCellSpan(row, cols[i] as UTSJSONObject, rowIndex, i);
+        const rowspan = span['rowspan'] as number;
+        const colspan = span['colspan'] as number;
+        if (rowspan > 0 && colspan > 1 && i + colspan > columnIndex) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function isCellRendered(row: UTSJSONObject, rowIndex: number, columnIndex: number): boolean {
+    const col = (props.columns as UTSJSONObject[])[columnIndex] as UTSJSONObject;
+    const span = getCellSpan(row, col, rowIndex, columnIndex);
+    const rowspan = span['rowspan'] as number;
+    const colspan = span['colspan'] as number;
+    if (rowspan == 0 || colspan == 0) {
+        return !isHiddenBySameRowColspan(row, rowIndex, columnIndex);
+    }
+    return true;
+}
+
+function getRowCells(row: UTSJSONObject, rowIndex: number): UTSJSONObject[] {
+    const result = createRowList();
+    const cols = props.columns as UTSJSONObject[];
+    for (let i = 0; i < cols.length; i++) {
+        if (isCellRendered(row, rowIndex, i)) {
+            result.push({
+                col: cols[i],
+                colIndex: i
+            } as UTSJSONObject);
+        }
+    }
+    return result;
+}
+
+function getFixedRowCells(row: UTSJSONObject, rowIndex: number): UTSJSONObject[] {
+    const result = createRowList();
+    const cols = fixedLeftColumns.value as UTSJSONObject[];
+    for (let i = 0; i < cols.length; i++) {
+        const colIndex = getColumnIndex(cols[i] as UTSJSONObject);
+        if (isCellRendered(row, rowIndex, colIndex)) {
+            result.push({
+                col: cols[i],
+                colIndex: colIndex
+            } as UTSJSONObject);
+        }
+    }
+    return result;
+}
+
+function getCellText(row: UTSJSONObject, col: UTSJSONObject): string {
+    const field = getColumnField(col);
+    if (field == '') {
+        return '';
+    }
+    const text = valueToString(row[field]);
+    return text == '' ? '-' : text;
+}
+
+function hasChildrenRow(row: UTSJSONObject): boolean {
+    const rawChildren = row[getChildrenKey()] as any | null;
+    if (rawChildren == null || !Array.isArray(rawChildren)) {
+        return false;
+    }
+    const children = rawChildren as UTSJSONObject[];
+    return children.length > 0;
+}
+
+function showTreeIcon(col: UTSJSONObject, row: UTSJSONObject): boolean {
+    if (!hasTree.value) {
+        return false;
+    }
+    if (!isMainColumn(col)) {
+        return false;
+    }
+    return hasChildrenRow(row);
+}
+
+function toggleExpand(row: UTSJSONObject): void {
+    if (!hasChildrenRow(row)) {
+        return;
+    }
+    const key = getRowKeyValue(row);
+    if (key == '') {
+        return;
+    }
+    const expandedKeyList = expandedKeys.value as string[];
+    const index = expandedKeyList.indexOf(key);
+    if (index > -1) {
+        expandedKeyList.splice(index, 1);
+    } else {
+        expandedKeyList.push(key);
+    }
+    expandedKeys.value = expandedKeyList;
+    emit('expand-change', expandedKeyList.slice());
+}
+
+function isSelected(row: UTSJSONObject): boolean {
+    const key = getRowKeyValue(row);
+    if (key == '') {
+        return false;
+    }
+    const selectedKeyList = selectedKeys.value as string[];
+    return selectedKeyList.indexOf(key) > -1;
+}
+
+function addSelectedRowAndChildren(row: UTSJSONObject, selectedKeyList: string[]): void {
+    const key = getRowKeyValue(row);
+    if (key != '' && selectedKeyList.indexOf(key) == -1) {
+        selectedKeyList.push(key);
+    }
+    const children = row[getChildrenKey()] as UTSJSONObject[] | null;
+    if (children == null || !Array.isArray(children)) {
+        return;
+    }
+    for (let i = 0; i < children.length; i++) {
+        addSelectedRowAndChildren(children[i] as UTSJSONObject, selectedKeyList);
+    }
+}
+
+function removeSelectedRowAndChildren(row: UTSJSONObject, selectedKeyList: string[]): void {
+    const key = getRowKeyValue(row);
+    const index = selectedKeyList.indexOf(key);
+    if (index > -1) {
+        selectedKeyList.splice(index, 1);
+    }
+    const children = row[getChildrenKey()] as UTSJSONObject[] | null;
+    if (children == null || !Array.isArray(children)) {
+        return;
+    }
+    for (let i = 0; i < children.length; i++) {
+        removeSelectedRowAndChildren(children[i] as UTSJSONObject, selectedKeyList);
+    }
+}
+
+function collectAllRows(rows: UTSJSONObject[], result: UTSJSONObject[]): void {
+    if (!Array.isArray(rows) || rows.length == 0) {
+        return;
+    }
+    const childrenKey = getChildrenKey();
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i] as UTSJSONObject;
+        result.push(row);
+        const children = row[childrenKey] as UTSJSONObject[] | null;
+        if (children != null && Array.isArray(children) && children.length > 0) {
+            collectAllRows(children, result);
+        }
+    }
+}
+
+function getAllRows(): UTSJSONObject[] {
+    const result = createRowList();
+    collectAllRows(processedData.value as UTSJSONObject[], result);
+    return result;
+}
+
+function getSelectedRows(): UTSJSONObject[] {
+    const result = createRowList();
+    const rows = getAllRows();
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i] as UTSJSONObject;
+        if (isSelected(row)) {
+            result.push(row);
+        }
+    }
+    return result;
+}
+
+function toggleSelect(row: UTSJSONObject): void {
+    const key = getRowKeyValue(row);
+    if (key == '') {
+        return;
+    }
+    const selectedKeyList = selectedKeys.value as string[];
+    const index = selectedKeyList.indexOf(key);
+    if (index > -1) {
+        removeSelectedRowAndChildren(row, selectedKeyList);
+    } else {
+        addSelectedRowAndChildren(row, selectedKeyList);
+    }
+    selectedKeys.value = selectedKeyList;
+    emit('select', row, isSelected(row));
+    emit('selection-change', getSelectedRows());
+}
+
+function isAllSelected(): boolean {
+    const rows = getAllRows();
+    if (rows.length == 0) {
+        return false;
+    }
+    for (let i = 0; i < rows.length; i++) {
+        if (!isSelected(rows[i] as UTSJSONObject)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function toggleSelectAll(): void {
+    const rows = getAllRows();
+    if (isAllSelected()) {
+        selectedKeys.value = createStringList();
+    } else {
+        const next = createStringList();
+        for (let i = 0; i < rows.length; i++) {
+            const key = getRowKeyValue(rows[i] as UTSJSONObject);
+            if (key != '') {
+                next.push(key);
+            }
+        }
+        selectedKeys.value = next;
+    }
+    const selectedRows = getSelectedRows();
+    emit('select-all', selectedRows);
+    emit('selection-change', selectedRows);
+}
+
+function pruneSelection(): void {
+    const valid = createStringList();
+    const rows = getAllRows();
+    for (let i = 0; i < rows.length; i++) {
+        const key = getRowKeyValue(rows[i] as UTSJSONObject);
+        if (key != '') {
+            valid.push(key);
+        }
+    }
+    const next = createStringList();
+    const selectedKeyList = selectedKeys.value as string[];
+    for (let i = 0; i < selectedKeyList.length; i++) {
+        const key = selectedKeyList[i];
+        if (valid.indexOf(key) > -1) {
+            next.push(key);
+        }
+    }
+    selectedKeys.value = next;
+}
+
+function handleRowClick(row: UTSJSONObject): void {
+    if (props.highlightCurrentRow) {
+        currentRowValue.value = getRowKeyValue(row);
+        emit('current-change', row);
+    }
+    emit('row-click', row);
+}
+
+function getRowClass(row: UTSJSONObject, flatIndex: number): string {
+    let className = '';
+    if (props.highlightCurrentRow && currentRowValue.value != '' && currentRowValue.value == getRowKeyValue(row)) {
+        className += ' up-table-row-highlight';
+    }
+    if (props.stripe && flatIndex % 2 == 1) {
+        className += ' up-table-row-zebra';
+    }
+    if (props.rowClassName != null) {
+        const callback = props.rowClassName as RowClassNameCallback;
+        const customClass = valueToString(callback(row, flatIndex));
+        if (customClass != null && customClass != '') {
+            className += ' ' + customClass;
+        }
+    }
+    return className;
+}
+
+function getSortConditions(): UTSJSONObject[] {
+    if (sortKey.value == '' || sortOrder.value == '') {
+        return createRowList();
+    }
+    return [{
+        key: sortKey.value,
+        order: sortOrder.value
+    } as UTSJSONObject];
+}
+
+function handleHeaderClick(col: UTSJSONObject): void {
+    emit('header-click', col);
+    if (!isSortableColumn(col)) {
+        return;
+    }
+    const key = getColumnField(col);
+    if (key == '') {
+        return;
+    }
+    if (sortKey.value != key) {
+        sortKey.value = key;
+        sortOrder.value = 'ascending';
+    } else if (sortOrder.value == 'ascending') {
+        sortOrder.value = 'descending';
+    } else {
+        sortKey.value = '';
+        sortOrder.value = '';
+    }
+    emit('sort-change', getSortConditions());
+}
+
+function getSortIcon(col: UTSJSONObject): string {
+    const key = getColumnField(col);
+    if (key == '' || !isSortableColumn(col)) {
+        return '';
+    }
+    if (sortKey.value != key || sortOrder.value == '') {
+        return '-';
+    }
+    return sortOrder.value == 'ascending' ? '^' : 'v';
+}
+
+function getNaturalTableHeight(): string {
+    const headerHeight = props.showHeader ? 44 : 0;
+    const rowHeight = toNumber(props.rowHeight, 44);
+    const rows = hasData.value ? (flatRows.value as UTSJSONObject[]).length : 1;
+    return (headerHeight + rowHeight * rows).toString() + 'px';
+}
+
+function getScrollStyle(): UTSJSONObject {
+    const style = createEmptyObject();
+    const heightText = addUnitLocal(props.height);
+    if (heightText != 'auto') {
+        style['height'] = heightText;
+    } else {
+        style['height'] = getNaturalTableHeight();
+    }
+    return style;
+}
+
+function getBodyStyle(): UTSJSONObject {
+    const style = createEmptyObject();
+    const maxHeightText = addUnitLocal(props.maxHeight);
+    if (maxHeightText != 'auto') {
+        style['maxHeight'] = maxHeightText;
+    }
+    return style;
+}
+
+function getFixedShadowWidth(): number {
+    const cols = fixedLeftColumns.value as UTSJSONObject[];
+    let total = 0;
+    const parts = createStringList();
+    for (let i = 0; i < cols.length; i++) {
+        const col = cols[i] as UTSJSONObject;
+        const width = getColumnWidthNumber(col);
+        total += width;
+        if (props.border) {
+            total += 1;
+        }
+        parts.push(getColumnField(col) + ':' + width.toString());
+    }
+    return total;
+}
+
+function getFixedShadowStyle(): UTSJSONObject {
+    const style = createEmptyObject();
+    style['height'] = getNaturalTableHeight();
+    style['width'] = getFixedShadowWidth().toString() + 'px';
+    return style;
+}
+
+function onScroll(e: UniScrollEvent): void {
+    scrollLeftValue.value = e.detail.scrollLeft;
+}
+
+// #ifndef APP
+function onScrollRaw(e: Event): void {
+    const target = e.target as HTMLElement | null;
+    if (target != null) {
+        scrollLeftValue.value = (target as any).scrollLeft as number;
+    }
+}
+// #endif
+
+watch((): any[] | null => props.expandRowKeys as any[] | null, (newVal: any[] | null) => {
+    expandedKeys.value = normalizeKeys(newVal);
+}, { immediate: true })
+
+watch((): any | null => props.currentRowKey, (newVal: any | null) => {
+    currentRowValue.value = normalizeKey(newVal);
+}, { immediate: true })
+
+watch((): UTSJSONObject => normalizeFilters(props.filters), (newVal: UTSJSONObject) => {
+    emit('filter-change', newVal);
+}, { deep: true })
+
+watch((): UTSJSONObject[] => props.data as UTSJSONObject[], () => {
+    pruneSelection();
+}, { deep: true })
+
+onMounted(() => {
+    expandedKeys.value = normalizeKeys(props.expandRowKeys as any[] | null);
+    currentRowValue.value = normalizeKey(props.currentRowKey);
+})
+
+defineExpose({
+    expandedKeys,
+    selectedKeys,
+    sortKey,
+    sortOrder,
+    currentRowValue,
+    scrollLeftValue,
+    rowHeightValue,
+    expandWidthValue,
+    mainColumnKey,
+    processedData,
+    flatRows,
+    hasData,
+    hasTree,
+    fixedLeftColumns,
+    showFixedShadow,
+    normalizeKey,
+    getTableContentStyle,
+    getTableContentWidth,
+    getTableContentWidthValue,
+    getColumnWidthNumber,
+    getColumnWidth,
+    collectFlatRows,
+    safeToNumber,
+    normalizeKeys,
+    getChildrenKey,
+    getRowKeyValue,
+    getRowKey,
+    getColumnField,
+    getColumnKey,
+    getColumnIndex,
+    getColumnTitle,
+    isSelectionColumn,
+    isSortableColumn,
+    getHeaderAlignClass,
+    getCellAlignClass,
+    getCellClassName,
+    getFixedLeftOffset,
+    getHeaderCellStyle,
+    getFixedHeaderCellStyle,
+    getBaseCellStyle,
+    getCellStyle,
+    getFixedCellStyle,
+    getSpanValue,
+    getCellSpanArray,
+    getCellSpan,
+    getCellSpanClass,
+    getHeaderCellExtraClass,
+    getCellTextClass,
+    isHiddenBySameRowColspan,
+    isCellRendered,
+    getRowCells,
+    getFixedRowCells,
+    getCellSpanStyle,
+    getCellText,
+    isMainColumn,
+    hasChildrenRow,
+    showTreeIcon,
+    isExpanded,
+    toggleExpand,
+    isSelected,
+    toggleSelect,
+    addSelectedRowAndChildren,
+    removeSelectedRowAndChildren,
+    isAllSelected,
+    toggleSelectAll,
+    getSelectedRows,
+    pruneSelection,
+    getAllRows,
+    collectAllRows,
+    handleRowClick,
+    getRowClass,
+    handleHeaderClick,
+    getSortConditions,
+    getSortIcon,
+    applyFilters,
+    applySort,
+    compareRows,
+    getScrollStyle,
+    getNaturalTableHeight,
+    getBodyStyle,
+    getFixedShadowStyle,
+    getFixedShadowWidth,
+    onScroll,
+    toNumber
+})
+</script>
+
+<style lang="scss" scoped>
+.up-table2 {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.up-table2-scroll {
+    width: 100%;
+}
+
+/* #ifndef APP */
+.up-table2-scroll-h5 {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+/* #endif */
+
+.up-table2-content {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+
+.up-table-row {
+    display: flex;
+    flex-direction: row;
+    overflow: visible;
+}
+
+.up-table-header-row {
+    background-color: #f5f7fa;
+}
+
+.up-table-body {
+    width: 100%;
+}
+
+.up-table-cell--body {
+    font-size: 12px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.up-table-cell {
+    min-width: 0;
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    align-items: center;
+    font-size: 13px;
+    padding: 6px 6px;
+    border-bottom: 1px solid #ebeef5;
+}
+
+.up-table-header-cell {
+    border-bottom: 1px solid #dcdfe6;
+}
+
+.up-table-header-text {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.up-table-cell-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.up-table-sort-icon {
+    margin-left: 6px;
+    color: #909399;
+}
+
+.up-table-tree-toggle {
+    width: 24px;
+    margin-right: 4px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.up-table-empty {
+    padding: 20px;
+    text-align: center;
+    color: #999;
+}
+
+.up-table-row-zebra {
+    background-color: #fafafa;
+}
+
+.up-table-row-highlight {
+    background-color: #ecf5ff;
+}
+
+.up-text-left {
+    justify-content: flex-start;
+}
+
+.up-text-center {
+    justify-content: center;
+}
+
+.up-text-right {
+    justify-content: flex-end;
+}
+
+.up-table-border {
+    border-top: 1px solid #ebeef5;
+    border-left: 1px solid #ebeef5;
+    border-right: 1px solid #ebeef5;
+}
+
+.up-table-cell--border {
+    border-right: 1px solid #ebeef5;
+}
+
+.up-table-cell--last {
+    border-right: none;
+}
+
+.up-table-cell-hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.up-table-cell-merged {
+    position: relative;
+    z-index: 2;
+    align-items: center;
+    overflow: visible;
+}
+
+.up-table-cell-text--merged {
+    overflow: visible;
+    text-overflow: clip;
+}
+
+.up-table-fixed-shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 20;
+    overflow: hidden;
+    background-color: #ffffff;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15);
+}
+</style>