hy-app 0.5.11 → 0.5.12

package/components/hy-table/hy-table.vue

@@ -1,358 +1,579 @@
-<template>
-    <view class="hy-table" :style="{ height: addUnit(height) }">
-        <!-- 主容器 -->
-        <view class="hy-table__container">
-            <!-- 表头区域 -->
-            <view class="hy-table__header">
-                <!-- 固定左列表头 -->
-                <view v-if="leftFixedColumns.length > 0" class="hy-table__header--left">
-                    <view
-                        class="hy-table__header__th"
-                        v-for="(col, index) in leftFixedColumns"
-                        :key="col.key || index"
-                        :style="[getCellStyle(col, true)]"
-                        @click="handleSort(col)"
-                    >
-                        <text class="hy-table__header__th--text">{{ col.title }}</text>
-                        <!-- 排序图标 -->
-                        <view v-if="col.sortable" class="hy-table__header__th--sort">
-                            <hy-icon
-                                :name="IconConfig.ARROW_UP_FILL"
-                                size="10"
-                                :custom-class="sortKey === col.key && sortType === 'asc' ? 'is-active' : ''"
-                            />
-                            <hy-icon
-                                :name="IconConfig.ARROW_DOWN_FILL"
-                                size="10"
-                                :custom-class="sortKey === col.key && sortType === 'desc' ? 'is-active' : ''"
-                            />
-                        </view>
-                    </view>
-                </view>
-                <!-- 中间表头 -->
-                <view class="hy-table__header--center" :style="{ paddingLeft: `${leftFixedWidth}px`, paddingRight: `${rightFixedWidth}px` }">
-                    <view
-                        class="hy-table__header__th"
-                        v-for="(col, index) in scrollColumns"
-                        :key="col.key || index"
-                        :style="[getCellStyle(col, true)]"
-                        @click="handleSort(col)"
-                    >
-                        <text class="hy-table__header__th--text">{{ col.title }}</text>
-                        <!-- 排序图标 -->
-                        <view v-if="col.sortable" class="hy-table__header__th--sort">
-                            <hy-icon
-                                :name="IconConfig.ARROW_UP_FILL"
-                                size="10"
-                                :custom-class="sortKey === col.key && sortType === 'asc' ? 'is-active' : ''"
-                            />
-                            <hy-icon
-                                :name="IconConfig.ARROW_DOWN_FILL"
-                                size="10"
-                                :custom-class="sortKey === col.key && sortType === 'desc' ? 'is-active' : ''"
-                            />
-                        </view>
-                    </view>
-                </view>
-                <!-- 固定右列表头 -->
-                <view v-if="rightFixedColumns.length > 0" class="hy-table__header--right">
-                    <view
-                        class="hy-table__header__th"
-                        v-for="(col, index) in rightFixedColumns"
-                        :key="col.key || index"
-                        :style="[getCellStyle(col, true)]"
-                        @click="handleSort(col)"
-                    >
-                        <text class="hy-table__header__th--text">{{ col.title }}</text>
-                        <!-- 排序图标 -->
-                        <view v-if="col.sortable" class="hy-table__header__th--sort">
-                            <hy-icon
-                                :name="IconConfig.ARROW_UP_FILL"
-                                size="10"
-                                :custom-class="sortKey === col.key && sortType === 'asc' ? 'is-active' : ''"
-                            />
-                            <hy-icon
-                                :name="IconConfig.ARROW_DOWN_FILL"
-                                size="10"
-                                :custom-class="sortKey === col.key && sortType === 'desc' ? 'is-active' : ''"
-                            />
-                        </view>
-                    </view>
-                </view>
-            </view>
-            
-            <!-- 内容区域 -->
-            <scroll-view 
-                class="hy-table__body"
-                scroll-y
-                :scroll-top="scrollTop"
-                @scroll="handleScroll"
-            >
-                <!-- 内容包装器 -->
-                <view class="hy-table__body__wrapper">
-                    <!-- 固定左列内容 -->
-                    <view v-if="leftFixedColumns.length > 0" class="hy-table__body--left">
-                        <view
-                            class="hy-table__body__tr"
-                            v-for="(row, rowIndex) in tableData"
-                            :key="`left-${row[rowKey] || rowIndex}`"
-                        >
-                            <view
-                                class="hy-table__body__td"
-                                v-for="(col, colIndex) in leftFixedColumns"
-                                :key="col.key || colIndex"
-                                :style="[getCellStyle(col, false)]"
-                                @click.stop="handleCellClick(row, col)"
-                            >
-                                <slot name="default" :row="row" :col="col" :index="rowIndex">
-                                    <text :class="{ 'hy-table__body__td--ellipsis': col.ellipsis }">{{ row[col.key] }}</text>
-                                </slot>
-                            </view>
-                        </view>
-                    </view>
-                    <!-- 中间内容 -->
-                    <view class="hy-table__body--center" :style="{ paddingLeft: `${leftFixedWidth}px`, paddingRight: `${rightFixedWidth}px` }">
-                        <view
-                            class="hy-table__body__tr"
-                            v-for="(row, rowIndex) in tableData"
-                            :key="row[rowKey] || rowIndex"
-                            @click="handleRowClick(row, rowIndex)"
-                        >
-                            <view
-                                class="hy-table__body__td"
-                                v-for="(col, colIndex) in scrollColumns"
-                                :key="col.key || colIndex"
-                                :style="[getCellStyle(col, false)]"
-                                @click.stop="handleCellClick(row, col)"
-                            >
-                                <slot name="default" :row="row" :col="col" :index="rowIndex">
-                                    <text :class="{ 'hy-table__body__td--ellipsis': col.ellipsis }">{{ row[col.key] }}</text>
-                                </slot>
-                            </view>
-                        </view>
-                    </view>
-                    <!-- 固定右列内容 -->
-                    <view v-if="rightFixedColumns.length > 0" class="hy-table__body--right">
-                        <view
-                            class="hy-table__body__tr"
-                            v-for="(row, rowIndex) in tableData"
-                            :key="`right-${row[rowKey] || rowIndex}`"
-                        >
-                            <view
-                                class="hy-table__body__td"
-                                v-for="(col, colIndex) in rightFixedColumns"
-                                :key="col.key || colIndex"
-                                :style="[getCellStyle(col, false)]"
-                                @click.stop="handleCellClick(row, col)"
-                            >
-                                <slot name="default" :row="row" :col="col" :index="rowIndex">
-                                    <text :class="{ 'hy-table__body__td--ellipsis': col.ellipsis }">{{ row[col.key] }}</text>
-                                </slot>
-                            </view>
-                        </view>
-                    </view>
-                </view>
-                
-                <!-- 空状态 -->
-                <hy-empty
-                    v-if="!loading && tableData.length === 0"
-                    :description="emptyText"
-                ></hy-empty>
-                
-                <!-- 加载状态 -->
-                <hy-loading
-                    v-if="loading"
-                    text="加载中..."
-                    mode="circle"
-                    direction="column"
-                    custom-class="hy-table__body--loading"
-                ></hy-loading>
-            </scroll-view>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-table',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import tableProps from './props'
-import type { ITableColumn, ITableEmits, SortType } from './typing'
-import { addUnit, IconConfig } from '../../libs'
-// 组件
-import HyEmpty from '../hy-empty/hy-empty.vue'
-import HyLoading from '../hy-loading/hy-loading.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * 用于展示多条结构类似的数据， 可对数据进行排序等操作。
- * @displayName hy-table
- */
-defineOptions({})
-
-const props = defineProps(tableProps)
-const emit = defineEmits<ITableEmits>()
-
-// --- 状态管理 ---
-const sortKey = ref<string>('')
-const sortType = ref<SortType>('normal')
-const tableData = ref<any[]>([]) // 内部维护的数据，用于排序展示
-const scrollTop = ref<number>(0) // 滚动位置，用于控制表头定位
-
-// --- 监听数据变化 ---
-watch(
-    () => props.data,
-    (val) => {
-        tableData.value = [...val]
-        // 如果当前有排序状态，重新应用排序
-        if (sortKey.value && sortType.value) {
-            localSort()
-        }
-    },
-    { immediate: true, deep: true }
-)
-
-// --- 计算固定列和滚动列 ---
-const leftFixedColumns = computed(() => {
-    return props.columns.filter(col => col.fixed === 'left')
-})
-
-const rightFixedColumns = computed(() => {
-    return props.columns.filter(col => col.fixed === 'right')
-})
-
-const scrollColumns = computed(() => {
-    return props.columns.filter(col => !col.fixed)
-})
-
-// --- 计算固定列总宽度 ---
-const leftFixedWidth = computed(() => {
-    let width = 0
-    leftFixedColumns.value.forEach(col => {
-        const w = parseInt(String(col.width || 100))
-        width += w
-    })
-    return width
-})
-
-const rightFixedWidth = computed(() => {
-    let width = 0
-    rightFixedColumns.value.forEach(col => {
-        const w = parseInt(String(col.width || 100))
-        width += w
-    })
-    return width
-})
-
-// --- 计算总宽度 (用于 scroll-view 横向滚动) ---
-const totalMinWidth = computed(() => {
-    let width = 0
-    scrollColumns.value.forEach((col) => {
-        // 简单估算：如果有明确宽度则累加，否则给个默认值 100
-        const w = parseInt(String(col.width || 100))
-        width += w
-    })
-    return width
-})
-
-// --- 事件处理 ---
-// 处理滚动事件
-const handleScroll = (e: any) => {
-    scrollTop.value = e.detail.scrollTop
-}
-
-// --- 样式计算 ---
-const getCellStyle = (col: ITableColumn, isHeader: boolean) => {
-    const style: any = {}
-
-    // 处理宽度
-    if (col.width) {
-        const w = typeof col.width === 'number' ? `${col.width}px` : col.width
-        style.width = w
-        style.flex = `0 0 ${w}` // 固定宽度，不伸缩
-    } else {
-        style.flex = 1 // 自动填充
-        style.minWidth = '150rpx' // 最小宽度防止太挤
-    }
-
-    // 处理对齐
-    style.justifyContent =
-        col.align === 'center' ? 'center' : col.align === 'right' ? 'flex-end' : 'flex-start'
-    style.textAlign = col.align || 'left'
-
-    return style
-}
-
-// --- 排序逻辑 ---
-const handleSort = (col: ITableColumn) => {
-    if (!col.sortable) return
-
-    // 切换排序状态: '' -> 'asc' -> 'desc' -> ''
-    if (sortKey.value !== col.key) {
-        sortKey.value = col.key
-        sortType.value = 'asc'
-    } else {
-        if (sortType.value === 'asc') sortType.value = 'desc'
-        else if (sortType.value === 'desc') sortType.value = 'normal'
-        else sortType.value = 'asc' // 逻辑闭环
-    }
-
-    // 触发本地排序或远程排序事件
-    localSort()
-    emit('sort-change', { key: sortKey.value, type: sortType.value })
-}
-
-const localSort = () => {
-    if (!sortType.value) {
-        tableData.value = [...props.data] // 还原
-        return
-    }
-
-    tableData.value.sort((a, b) => {
-        const valA = a[sortKey.value]
-        const valB = b[sortKey.value]
-
-        // 简单的数字和字符串比较
-        if (valA === valB) return 0
-
-        let result = 0
-        if (typeof valA === 'number' && typeof valB === 'number') {
-            result = valA - valB
-        } else {
-            result = String(valA).localeCompare(String(valB))
-        }
-
-        return sortType.value === 'asc' ? result : -result
-    })
-}
-
-// --- 交互逻辑 ---
-const handleRowClick = (row: any, index: number) => {
-    emit('row-click', row, index)
-}
-
-// 处理单元格点击（主要用于Tooltip）
-const handleCellClick = (row: any, col: ITableColumn) => {
-    // 如果开启了 tooltip，显示完整内容
-    if (col.tooltip && col.ellipsis) {
-        const content = row[col.key]
-        if (content) {
-            uni.showToast({ title: String(content), icon: 'none' })
-        }
-    }
-    emit('cell-click', row, col)
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view class="hy-table" :style="{ height: addUnit(containerHeight) }">
+        <!-- 列头 -->
+        <view class="hy-table__header" v-if="showHeader">
+            <scroll-view
+                class="hy-table__header--scroll"
+                scroll-x
+                :scroll-left="scrollLeft"
+                :scroll-y="false"
+                @scroll="onHeaderScroll"
+            >
+                <view class="hy-table__header--wrapper" :style="{ width: addUnit(totalWidth) }">
+                    <!-- 左侧固定列头 -->
+                    <view
+                        v-if="leftFixedColumns.length > 0"
+                        :class="['hy-table__header--wrapper__left', scrollLeft && 'is-shadow']"
+                        :style="{ width: addUnit(leftFixedWidth), zIndex: 3 }"
+                    >
+                        <view
+                            v-for="(col, colIndex) in leftFixedColumns"
+                            :key="colIndex"
+                            class="hy-table__header--wrapper__cell"
+                            :style="getHeaderCellStyle(col)"
+                            @tap="handleSort(col)"
+                        >
+                            <slot v-if="$slots['left-head']" name="left-head" :col="col">
+                                <text class="header-text">{{ col.title }}</text>
+                            </slot>
+                            <text v-else class="hy-table__header--wrapper__cell--text">{{
+                                col.title
+                            }}</text>
+                            <view
+                                v-if="col.sortable"
+                                class="hy-table__header--wrapper__cell--sortable"
+                            >
+                                <hy-icon
+                                    :name="IconConfig.ARROW_UP_FILL"
+                                    size="12"
+                                    :custom-class="
+                                        sortField === col.key && sortOrder === 'asc'
+                                            ? 'is-active'
+                                            : ''
+                                    "
+                                    @click.stop="handleSort(col, 'asc')"
+                                ></hy-icon>
+
+                                <hy-icon
+                                    :name="IconConfig.ARROW_DOWN_FILL"
+                                    size="12"
+                                    :custom-class="
+                                        sortField === col.key && sortOrder === 'desc'
+                                            ? 'is-active'
+                                            : ''
+                                    "
+                                    @click.stop="handleSort(col, 'desc')"
+                                ></hy-icon>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- 中间滚动列头 -->
+                    <view class="hy-table__header--wrapper__center">
+                        <view
+                            v-for="(col, colIndex) in scrollColumns"
+                            :key="colIndex"
+                            class="hy-table__header--wrapper__cell"
+                            :style="getHeaderCellStyle(col)"
+                            @tap="handleSort(col)"
+                        >
+                            <slot v-if="$slots.head" name="head" :col="col"></slot>
+                            <text v-else class="hy-table__header--wrapper__cell--text">{{
+                                col.title
+                            }}</text>
+                            <view
+                                v-if="col.sortable"
+                                class="hy-table__header--wrapper__cell--sortable"
+                            >
+                                <hy-icon
+                                    :name="IconConfig.ARROW_UP_FILL"
+                                    size="12"
+                                    :custom-class="
+                                        sortField === col.key && sortOrder === 'asc'
+                                            ? 'is-active'
+                                            : ''
+                                    "
+                                    @click.stop="handleSort(col, 'asc')"
+                                ></hy-icon>
+
+                                <hy-icon
+                                    :name="IconConfig.ARROW_DOWN_FILL"
+                                    size="12"
+                                    :custom-class="
+                                        sortField === col.key && sortOrder === 'desc'
+                                            ? 'is-active'
+                                            : ''
+                                    "
+                                    @click.stop="handleSort(col, 'desc')"
+                                ></hy-icon>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- 右侧固定列头 -->
+                    <view
+                        v-if="rightFixedColumns.length > 0"
+                        class="hy-table__header--wrapper__right"
+                        :style="{ width: addUnit(rightFixedWidth), zIndex: 3 }"
+                    >
+                        <view
+                            v-for="(col, colIndex) in rightFixedColumns"
+                            :key="colIndex"
+                            class="hy-table__header--wrapper__cell"
+                            :style="getHeaderCellStyle(col)"
+                            @tap="handleSort(col)"
+                        >
+                            <slot v-if="$slots['right-head']" name="right-head" :col="col"></slot>
+                            <text v-else class="hy-table__header--wrapper__cell--text">{{
+                                col.title
+                            }}</text>
+                            <view
+                                v-if="col.sortable"
+                                class="hy-table__header--wrapper__cell--sortable"
+                            >
+                                <hy-icon
+                                    :name="IconConfig.ARROW_UP_FILL"
+                                    size="12"
+                                    :custom-class="
+                                        sortField === col.key && sortOrder === 'asc'
+                                            ? 'is-active'
+                                            : ''
+                                    "
+                                    @click.stop="handleSort(col, 'asc')"
+                                ></hy-icon>
+
+                                <hy-icon
+                                    :name="IconConfig.ARROW_DOWN_FILL"
+                                    size="12"
+                                    :custom-class="
+                                        sortField === col.key && sortOrder === 'desc'
+                                            ? 'is-active'
+                                            : ''
+                                    "
+                                    @click.stop="handleSort(col, 'desc')"
+                                ></hy-icon>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+
+        <!-- 表格主体 -->
+        <view class="hy-table__body">
+            <view v-if="loading" class="hy-table__body--loading">
+                <hy-loading text="加载中..." mode="circle"></hy-loading>
+            </view>
+            <view v-if="!data.length" class="hy-table__body--empty">
+                <slot v-if="$slots.empty" name="empty"></slot>
+                <hy-empty v-else :image-url="emptyUrl" :description="emptyDes"></hy-empty>
+            </view>
+            <!-- 左侧固定列 -->
+            <scroll-view
+                v-if="processedData.length"
+                :class="['hy-table__body--left', scrollLeft && 'is-shadow']"
+                scroll-y
+                :scroll-top="scrollTop"
+                :style="{ width: addUnit(leftFixedWidth), height: addUnit(bodyHeight) }"
+                @scroll="onLeftScroll"
+            >
+                <view class="hy-table__body--content">
+                    <view
+                        v-for="(row, rowIndex) in processedData"
+                        :key="rowIndex"
+                        :class="rowClass(rowIndex)"
+                        :style="getRowStyle(rowIndex)"
+                    >
+                        <view
+                            v-for="(col, colIndex) in leftFixedColumns"
+                            :key="colIndex"
+                            class="hy-table__body--content__row--cell"
+                            :style="getBodyCellStyle(col, rowIndex)"
+                            @tap="onCellClick(row, rowIndex)"
+                        >
+                            <slot
+                                v-if="$slots.left"
+                                name="left"
+                                :row="row"
+                                :col="col"
+                                :index="rowIndex"
+                            ></slot>
+                            <text
+                                v-else
+                                class="hy-table__body--content__row--cell__text"
+                                :class="{ 'is-ellipsis': col.ellipsis }"
+                            >
+                                {{ getCellValue(row, col) }}
+                            </text>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+
+            <!-- 中间滚动区域 -->
+            <scroll-view
+                v-if="processedData.length"
+                class="hy-table__body--center"
+                scroll-y
+                :scroll-top="scrollTop"
+                @scroll="onScroll"
+                :style="{
+                    width: `calc(100% - ${leftFixedWidth + rightFixedWidth}px)`,
+                    height: addUnit(bodyHeight),
+                    left: addUnit(leftFixedWidth),
+                    right: addUnit(rightFixedWidth)
+                }"
+            >
+                <scroll-view
+                    scroll-x
+                    :scroll-left="scrollLeft"
+                    class="hy-table__body--content"
+                    @scroll="onCrosswiseScroll"
+                >
+                    <view
+                        v-for="(row, rowIndex) in processedData"
+                        :key="rowIndex"
+                        :class="rowClass(rowIndex)"
+                        :style="getRowStyle(rowIndex)"
+                    >
+                        <view
+                            v-for="(col, colIndex) in scrollColumns"
+                            :key="colIndex"
+                            class="hy-table__body--content__row--cell"
+                            :class="{ ellipsis: col.ellipsis }"
+                            :style="getBodyCellStyle(col, rowIndex)"
+                            @tap="onCellClick(row, rowIndex)"
+                        >
+                            <slot
+                                v-if="$slots.default"
+                                name="default"
+                                :row="row"
+                                :col="col"
+                                :index="rowIndex"
+                            ></slot>
+                            <text
+                                v-else
+                                class="hy-table__body--content__row--cell__text"
+                                :class="{ 'is-ellipsis': col.ellipsis }"
+                            >
+                                {{ getCellValue(row, col) }}
+                            </text>
+                        </view>
+                    </view>
+                </scroll-view>
+            </scroll-view>
+
+            <!-- 右侧固定列 -->
+            <scroll-view
+                v-if="processedData.length"
+                class="hy-table__body--right"
+                scroll-y
+                :scroll-top="scrollTop"
+                :style="{
+                    width: addUnit(rightFixedWidth),
+                    height: addUnit(bodyHeight),
+                    right: '0'
+                }"
+                @scroll="onRightScroll"
+            >
+                <view class="hy-table__body--content">
+                    <view
+                        v-for="(row, rowIndex) in processedData"
+                        :key="rowIndex"
+                        :class="rowClass(rowIndex)"
+                        :style="getRowStyle(rowIndex)"
+                    >
+                        <view
+                            v-for="(col, colIndex) in rightFixedColumns"
+                            :key="colIndex"
+                            class="hy-table__body--content__row--cell"
+                            :style="getBodyCellStyle(col, rowIndex)"
+                            @tap="onCellClick(row, rowIndex)"
+                        >
+                            <slot
+                                v-if="$slots.right"
+                                name="right"
+                                :row="row"
+                                :col="col"
+                                :index="rowIndex"
+                            ></slot>
+                            <text
+                                v-else
+                                class="hy-table__body--content__row--cell__text"
+                                :class="{ 'is-ellipsis': col.ellipsis }"
+                            >
+                                {{ getCellValue(row, col) }}
+                            </text>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { addUnit, IconConfig, sleep, getPx } from '../../libs'
+import type { ITableColumn, ITableEmits } from './typing'
+import tableProps from './props'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyEmpty from '../hy-empty/hy-empty.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
+
+const props = defineProps(tableProps)
+const emit = defineEmits<ITableEmits>()
+
+// 响应式数据
+const scrollLeft = ref(0)
+const scrollTop = ref(0)
+const rowHeights = ref<number[]>([])
+const sortField = ref<string>('')
+const sortOrder = ref<'asc' | 'desc'>('asc')
+
+// 防止滚动循环触发和抖动的标志位
+const isUpdatingScroll = ref(false)
+
+// 计算属性
+const leftFixedColumns = computed(() => props.columns.filter((col) => col.fixed === 'left'))
+
+const rightFixedColumns = computed(() => props.columns.filter((col) => col.fixed === 'right'))
+
+const scrollColumns = computed(() => props.columns.filter((col) => !col?.fixed))
+
+const leftFixedWidth = computed(() =>
+    leftFixedColumns.value.reduce((sum, col) => sum + col.width, 0)
+)
+
+const rightFixedWidth = computed(() =>
+    rightFixedColumns.value.reduce((sum, col) => sum + col.width, 0)
+)
+
+const scrollWidth = computed(() => scrollColumns.value.reduce((sum, col) => sum + col.width, 0))
+
+const totalWidth = computed(() => leftFixedWidth.value + scrollWidth.value + rightFixedWidth.value)
+
+const containerHeight = computed(() => props.height)
+
+const bodyHeight = computed(() => {
+    // 减去表头高度
+    return props.showHeader ? getPx(props.height) - 50 : props.height
+})
+
+const processedData = computed(() => {
+    let data = [...props.data]
+
+    if (sortField.value) {
+        data.sort((a, b) => {
+            const aVal = a[sortField.value]
+            const bVal = b[sortField.value]
+
+            if (aVal === bVal) return 0
+            if (sortOrder.value === 'asc') {
+                return aVal > bVal ? 1 : -1
+            } else {
+                return aVal < bVal ? 1 : -1
+            }
+        })
+    }
+
+    return data
+})
+
+// 方法
+const getHeaderCellStyle = (col: ITableColumn) => {
+    return {
+        width: addUnit(col.width),
+        textAlign: col.align || 'left',
+        flexShrink: 0
+    }
+}
+
+const getBodyCellStyle = (col: ITableColumn, rowIndex: number) => {
+    const rowHeight = rowHeights.value[rowIndex] || props.rowHeight
+    return {
+        width: addUnit(col.width),
+        textAlign: col.align || 'left',
+        flexShrink: 0,
+        height: addUnit(rowHeight),
+        lineHeight: addUnit(rowHeight)
+    }
+}
+
+/**
+ * 行类名
+ * */
+const rowClass = computed(() => {
+    return (rowIndex: number) => {
+        const classes = ['hy-table__body--content__row']
+
+        if (props.stripe && rowIndex % 2 === 1) {
+            classes.push('is-stripe')
+        }
+
+        return classes
+    }
+})
+/**
+ * 行样式
+ * */
+const getRowStyle = computed(() => {
+    return (rowIndex: number) => {
+        const rowHeight = rowHeights.value[rowIndex] || props.rowHeight
+        const styles: any = {
+            width: addUnit(scrollWidth.value),
+            height: addUnit(rowHeight),
+            lineHeight: addUnit(rowHeight)
+        }
+
+        return styles
+    }
+})
+
+const getCellValue = (row: any, col: ITableColumn) => {
+    if (col.formatter) {
+        return col.formatter(row[col.key], row)
+    }
+    return row[col.key] || ''
+}
+
+const onHeaderScroll = async (e: any) => {
+    if (isUpdatingScroll.value) return
+
+    const newScrollLeft = e.detail.scrollLeft
+    if (Math.abs(newScrollLeft - scrollLeft.value) > 1) {
+        isUpdatingScroll.value = true
+        scrollLeft.value = newScrollLeft
+        // 在下一个事件循环重置标志位
+        await sleep(0)
+        isUpdatingScroll.value = false
+    }
+}
+
+/**
+ * 中间内容竖直滚动
+ * */
+const onScroll = async (e: any) => {
+    if (isUpdatingScroll.value) return
+
+    const newScrollTop = e.detail.scrollTop
+    isUpdatingScroll.value = true
+    if (Math.abs(newScrollTop - scrollTop.value) > 1) {
+        scrollTop.value = newScrollTop
+    }
+
+    // 在下一个事件循环重置标志位
+    await sleep(0)
+    isUpdatingScroll.value = false
+}
+
+/**
+ * 中间内容横向滚动
+ * */
+const onCrosswiseScroll = async (e: any) => {
+    if (isUpdatingScroll.value) return
+
+    const newScrollLeft = e.detail.scrollLeft
+    isUpdatingScroll.value = true
+    // 使用阈值来减少频繁更新，避免抖动
+    if (Math.abs(newScrollLeft - scrollLeft.value) > 1) {
+        scrollLeft.value = newScrollLeft
+    }
+    // 在下一个事件循环重置标志位
+    await sleep(0)
+    isUpdatingScroll.value = false
+}
+
+/**
+ * 左侧列表滚动
+ * */
+const onLeftScroll = async (e: any) => {
+    if (isUpdatingScroll.value) return
+
+    const newScrollTop = e.detail.scrollTop
+    if (Math.abs(newScrollTop - scrollTop.value) > 1) {
+        isUpdatingScroll.value = true
+        scrollTop.value = newScrollTop
+        // 在下一个事件循环重置标志位
+        await sleep(0)
+        isUpdatingScroll.value = false
+    }
+}
+
+/**
+ * 右侧列表滚动
+ * */
+const onRightScroll = async (e: any) => {
+    if (isUpdatingScroll.value) return
+
+    const newScrollTop = e.detail.scrollTop
+    if (Math.abs(newScrollTop - scrollTop.value) > 1) {
+        isUpdatingScroll.value = true
+        scrollTop.value = newScrollTop
+        // 在下一个事件循环重置标志位
+        await sleep(0)
+        isUpdatingScroll.value = false
+    }
+}
+
+/**
+ * 点击排序
+ * @param col 列标题
+ * @param sort 排序
+ * */
+const handleSort = (col: ITableColumn, sort?: 'asc' | 'desc') => {
+    if (!col.sortable) return
+
+    if (sort) {
+        sortOrder.value = sort
+        sortField.value = col.key
+    } else {
+        if (sortField.value === col.key) {
+            sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+        } else {
+            sortField.value = col.key
+            sortOrder.value = 'asc'
+        }
+    }
+
+    emit('sort-change', sortField.value, sortOrder.value)
+}
+
+/**
+ * 点击单元格
+ * @param row 行数据
+ * @param index 第几列
+ * */
+const onCellClick = (row: AnyObject, index: number) => {
+    emit('row-click', row, index)
+}
+
+// 初始化行高
+onMounted(() => {
+    rowHeights.value = new Array(props.data.length).fill(props.rowHeight)
+})
+
+// 监听数据变化
+watch(
+    () => props.data,
+    () => {
+        rowHeights.value = new Array(props.data.length).fill(props.rowHeight)
+    },
+    { deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+@import './index.scss';
+
+.header-text {
+    white-space: nowrap;
+}
+
+.sort-icons {
+    display: flex;
+    flex-direction: column;
+    margin-left: 4px;
+}
+
+.sort-icon {
+    font-size: 10px;
+    color: #ccc;
+    line-height: 0.8;
+}
+
+.sort-icon.active {
+    color: #1890ff;
+}
+</style>