uview-plus 3.8.49 → 3.8.86

package/components/u-table2/u-table2.vue

@@ -9,19 +9,19 @@
                 :style="{minWidth: scrollWidth}">
                 <view class="u-table-row">
                     <view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"
-                        :class="[col.headerAlign ? 'u-text-' + col.headerAlign : (col.align ? 'u-text-' + col.align : '') ,
-                            headerCellClassName ? headerCellClassName(col) : '',
-                            getFixedClass(col)
-                        ]" :style="headerColStyle(col)" @click="handleHeaderClick(col)">
-                        <slot name="header" :column="col" :columnIndex="colIndex" :level="1">
-                        </slot>
-                        <text v-if="!$slots['header']">{{ col.title }}</text>
-                        <template v-if="col.sortable">
-                            <slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col"
-                                :columnIndex="colIndex" :level="1">
-                            </slot>
-                            <view v-if="!$slots['headerSort']">
-                                {{ getSortIcon(col.key) }}
+                        :class="[col.headerAlign ? 'u-text-' + col.headerAlign : (col.align ? 'u-text-' + col.align : '') ,
+                            headerCellClassName ? headerCellClassName(col, context) : '',
+                            getFixedClass(col)
+                        ]" :style="headerColStyle(col)" @click="handleHeaderClick(col)">
+                        <slot name="header" :column="col" :columnIndex="colIndex" :level="1" :context="context">
+                        </slot>
+                        <text v-if="!$slots['header']">{{ col.title }}</text>
+                        <template v-if="isColumnSortable(col)">
+                            <slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col"
+                                :columnIndex="colIndex" :level="1" :context="context">
+                            </slot>
+                            <view v-if="!$slots['headerSort']">
+                                {{ getSortIcon(col.key) }}
                             </view>
                         </template>
                     </view>
@@ -34,13 +34,14 @@
                     <!-- #ifdef MP-WEIXIN -->
                     <template v-for="(item, flatIndex) in flattenedSortedData" :key="item.row[rowKey] || flatIndex">
                         <view class="u-table-row u-table-row-child" :class="[highlightCurrentRow && currentRow === item.row ? 'u-table-row-highlight' : '',
-                            rowClassName ? rowClassName(item.row, item.rowIndex) : '',
+                            rowClassName ? rowClassName(item.row, item.rowIndex, context) : '',
                             stripe && flatIndex % 2 === 1 ? 'u-table-row-zebra' : ''
-                        ]" :style="{ height: rowHeight }" @click="handleRowClick(item.row)">
+                        ]" :style="[{ height: rowHeight }, getRowStyle(item.row, item.rowIndex, item.level, item.parentRow)]" @click="handleRowClick(item.row)">
                             <view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"
                                 :class="[col.align ? 'u-text-' + col.align : '',
-                                    cellClassName ? cellClassName(item.row, col) : '',
+                                    cellClassName ? cellClassName(item.row, col, context) : '',
                                     getFixedClass(col),
+                                    isOverflowTooltipEnabled(col) ? 'u-table-cell-overflow' : '',
                                     getCellSpanClass(item.row, col, item.rowIndex, colIndex)
                                 ]"
                                 :style="[cellStyleInner({ row: item.row, column: col, rowIndex: item.rowIndex, columnIndex: colIndex, level: item.level }), getCellSpanStyle(item.row, col, item.rowIndex, colIndex)]">
@@ -48,18 +49,21 @@
                                     <checkbox :checked="isSelected(item.row)" @click.stop="toggleSelect(item.row)" />
                                 </view>
                                 <template v-else>
-                                    <view v-if="col.key === computedMainCol && hasTree" @click.stop="toggleExpand(item.row)"
+                                    <view v-if="col.key === computedMainCol && hasTree" @click.stop="toggleExpand(item.row, item.level)"
                                         :style="{ width: expandWidth }">
-                                        <view v-if="item.row[treeProps.children] && item.row[treeProps.children].length > 0">
-                                            {{ isExpanded(item.row) ? '▼' : '▶' }}
+                                        <view v-if="hasExpandableChildren(item.row)">
+                                            {{ isLazyLoading(item.row) ? '...' : (isExpanded(item.row) ? '▼' : '▶') }}
                                         </view>
                                     </view>
-                                    <slot name="cell" :row="item.row" :column="col" :prow="item.parentRow"
-                                        :rowIndex="item.rowIndex" :columnIndex="colIndex" :level="item.level">
-                                        <view class="u-table-cell_content">
-                                            {{ item.row[col.key] }}
-                                        </view>
-                                    </slot>
+                                    <view class="u-table-cell_content"
+                                        :class="{ 'u-table-cell_content-overflow': isOverflowTooltipEnabled(col) }">
+                                        <slot name="cell" :row="item.row" :column="col" :prow="item.parentRow"
+                                            :rowIndex="item.rowIndex" :columnIndex="colIndex" :level="item.level" :context="context">
+                                            <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(col) }" :lines="isOverflowTooltipEnabled(col) ? 1 : undefined">
+                                                {{ item.row[col.key] }}
+                                            </text>
+                                        </slot>
+                                    </view>
                                 </template>
                             </view>
                         </view>
@@ -79,9 +83,11 @@
                         :cell-style-inner="cellStyleInner"
                         :is-expanded="isExpanded"
                         :row-class-name="rowClassName"
+                        :row-style="rowStyle"
                         :stripe="stripe"
                         :cell-class-name="cellClassName"
                         :get-fixed-class="getFixedClass"
+                        :context="context"
                         :highlight-current-row="highlightCurrentRow"
                         :current-row="currentRow"
                         :handle-row-click="handleRowClick"
@@ -93,13 +99,19 @@
                         :expandWidth="expandWidth"
                         :computedMainCol="computedMainCol"
                         :span-method="spanMethod"
+                        :show-overflow-tooltip="showOverflowTooltip"
+                        :has-expandable-children="hasExpandableChildren"
+                        :is-lazy-loading="isLazyLoading"
                         @toggle-select="toggleSelect"
                         @row-click="handleRowClick"
                         @toggle-expand="toggleExpand"
                     >
                         <template v-slot:cellChild="scope">
                             <slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
-                                :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
+                                :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level" :context="context">
+                                <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(scope.column) }" :lines="isOverflowTooltipEnabled(scope.column) ? 1 : undefined">
+                                    {{ scope.row[scope.column.key] }}
+                                </text>
                             </slot>                      
                         </template>
                     </table-row>
@@ -118,21 +130,21 @@
             <!-- 表头 -->
             <view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }" :style="{minWidth: scrollWidth}">
                 <view class="u-table-row" :style="{height: headerHeight}">
-                    <view v-for="(col, colIndex) in visibleFixedLeftColumns" :key="col.key" class="u-table-cell"
-                        :style="headerColStyle(col)"
-                        :class="[col.align ? 'u-text-' + col.align : '',
-                            headerCellClassName ? headerCellClassName(col) : '',
-                            getFixedClass(col)
-                        ]" @click="handleHeaderClick(col)">
-                        <slot name="header" :column="col" :columnIndex="colIndex" :level="1">
-                        </slot>
-                        <text v-if="!$slots['header']">{{ col.title }}</text>
-                        <template v-if="col.sortable">
-                            <slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col"
-                                :columnIndex="colIndex" :level="1">
-                            </slot>
-                            <view v-if="!$slots['headerSort']">
-                                {{ getSortIcon(col.key) }}
+                    <view v-for="(col, colIndex) in visibleFixedLeftColumns" :key="col.key" class="u-table-cell"
+                        :style="headerColStyle(col)"
+                        :class="[col.align ? 'u-text-' + col.align : '',
+                            headerCellClassName ? headerCellClassName(col, context) : '',
+                            getFixedClass(col)
+                        ]" @click="handleHeaderClick(col)">
+                        <slot name="header" :column="col" :columnIndex="colIndex" :level="1" :context="context">
+                        </slot>
+                        <text v-if="!$slots['header']">{{ col.title }}</text>
+                        <template v-if="isColumnSortable(col)">
+                            <slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col"
+                                :columnIndex="colIndex" :level="1" :context="context">
+                            </slot>
+                            <view v-if="!$slots['headerSort']">
+                                {{ getSortIcon(col.key) }}
                             </view>
                         </template>
                     </view>
@@ -145,13 +157,14 @@
                     <!-- #ifdef MP-WEIXIN -->
                     <template v-for="(item, flatIndex) in flattenedSortedData" :key="item.row[rowKey] || flatIndex">
                         <view class="u-table-row u-table-row-child" :class="[highlightCurrentRow && currentRow === item.row ? 'u-table-row-highlight' : '',
-                            rowClassName ? rowClassName(item.row, item.rowIndex) : '',
+                            rowClassName ? rowClassName(item.row, item.rowIndex, context) : '',
                             stripe && flatIndex % 2 === 1 ? 'u-table-row-zebra' : ''
-                        ]" :style="{ height: rowHeight }" @click="handleRowClick(item.row)">
+                        ]" :style="[{ height: rowHeight }, getRowStyle(item.row, item.rowIndex, item.level, item.parentRow)]" @click="handleRowClick(item.row)">
                             <view v-for="(col, colIndex) in visibleFixedLeftColumns" :key="col.key" class="u-table-cell"
                                 :class="[col.align ? 'u-text-' + col.align : '',
-                                    cellClassName ? cellClassName(item.row, col) : '',
+                                    cellClassName ? cellClassName(item.row, col, context) : '',
                                     getFixedClass(col),
+                                    isOverflowTooltipEnabled(col) ? 'u-table-cell-overflow' : '',
                                     getCellSpanClass(item.row, col, item.rowIndex, colIndex)
                                 ]"
                                 :style="[cellStyleInner({ row: item.row, column: col, rowIndex: item.rowIndex, columnIndex: colIndex, level: item.level }), getCellSpanStyle(item.row, col, item.rowIndex, colIndex)]">
@@ -159,18 +172,19 @@
                                     <checkbox :checked="isSelected(item.row)" @click.stop="toggleSelect(item.row)" />
                                 </view>
                                 <template v-else>
-                                    <view v-if="col.key === computedMainCol && hasTree" @click.stop="toggleExpand(item.row)"
+                                    <view v-if="col.key === computedMainCol && hasTree" @click.stop="toggleExpand(item.row, item.level)"
                                         :style="{ width: expandWidth }">
-                                        <view v-if="item.row[treeProps.children] && item.row[treeProps.children].length > 0">
-                                            {{ isExpanded(item.row) ? '▼' : '▶' }}
+                                        <view v-if="hasExpandableChildren(item.row)">
+                                            {{ isLazyLoading(item.row) ? '...' : (isExpanded(item.row) ? '▼' : '▶') }}
                                         </view>
                                     </view>
-                                    <slot name="cell" :row="item.row" :column="col" :prow="item.parentRow"
-                                        :rowIndex="item.rowIndex" :columnIndex="colIndex" :level="item.level">
-                                        <view class="u-table-cell_content">
+                                    <!-- 固定列浮动视图直接内联渲染，不使用 slot，避免与主表体 slot name="cell" 重名报错（微信小程序限制） -->
+                                    <view class="u-table-cell_content"
+                                        :class="{ 'u-table-cell_content-overflow': isOverflowTooltipEnabled(col) }">
+                                        <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(col) }" :lines="isOverflowTooltipEnabled(col) ? 1 : undefined">
                                             {{ item.row[col.key] }}
-                                        </view>
-                                    </slot>
+                                        </text>
+                                    </view>
                                 </template>
                             </view>
                         </view>
@@ -190,9 +204,11 @@
                             :cell-style-inner="cellStyleInner"
                             :is-expanded="isExpanded"
                             :row-class-name="rowClassName"
+                            :row-style="rowStyle"
                             :stripe="stripe"
                             :cell-class-name="cellClassName"
                             :get-fixed-class="getFixedClass"
+                            :context="context"
                             :highlight-current-row="highlightCurrentRow"
                             :current-row="currentRow"
                             :handle-row-click="handleRowClick"
@@ -204,13 +220,19 @@
                             :expandWidth="expandWidth"
                             :computedMainCol="computedMainCol"
                             :span-method="spanMethod"
+                            :show-overflow-tooltip="showOverflowTooltip"
+                            :has-expandable-children="hasExpandableChildren"
+                            :is-lazy-loading="isLazyLoading"
                             @toggle-select="toggleSelect"
                             @row-click="handleRowClick"
                             @toggle-expand="toggleExpand"
                         >
                             <template v-slot:cellChild="scope">
                                 <slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
-                                    :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
+                                    :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level" :context="context">
+                                    <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(scope.column) }" :lines="isOverflowTooltipEnabled(scope.column) ? 1 : undefined">
+                                        {{ scope.row[scope.column.key] }}
+                                    </text>
                                 </slot>                      
                             </template>
                         </table-row>
@@ -282,10 +304,10 @@ export default {
             type: [String, Number],
             default: null
         },
-        rowStyle: {
-            type: Object,
-            default: () => ({})
-        },
+        rowStyle: {
+            type: [Object, Function],
+            default: () => ({})
+        },
         cellClassName: {
             type: Function,
             default: null
@@ -307,7 +329,7 @@ export default {
             default: null
         },
         showOverflowTooltip: {
-            type: Boolean,
+            type: [Boolean, Object],
             default: false
         },
         lazy: {
@@ -398,19 +420,21 @@ export default {
             selectedRows: [],
             sortConditions: [],
             currentRow: null,
-            scrollLeft: 0, // 新增滚动位置数据
-            showFixedColumnShadow: false, // 是否显示固定列阴影
-            fixedLeftColumns: [], // 左侧固定列
-            tableHeight: 'auto', // 表格高度
-            headerHeight: 'auto', // 新增表头高度属性
-            hasTree: false // 新增属性，用于判断是否存在树形结构
-        }
-    },
-    mounted() {
-        this.getComponentWidth()
-        // 处理currentRowKey初始化
-        if (this.currentRowKey !== null) {
-            const found = this.data.find(item => item[this.rowKey] === this.currentRowKey);
+            scrollLeft: 0, // 新增滚动位置数据
+            showFixedColumnShadow: false, // 是否显示固定列阴影
+            fixedLeftColumns: [], // 左侧固定列
+            tableHeight: 'auto', // 表格高度
+            headerHeight: 'auto', // 新增表头高度属性
+            hasTree: false, // 新增属性，用于判断是否存在树形结构
+            lazyLoadingKeys: []
+        }
+    },
+    mounted() {
+        this.getComponentWidth()
+        this.initDefaultExpandAll()
+        // 处理currentRowKey初始化
+        if (this.currentRowKey !== null) {
+            const found = this.data.find(item => item[this.rowKey] === this.currentRowKey);
             if (found) {
                 this.currentRow = found;
             }
@@ -433,17 +457,18 @@ export default {
             if (!this.sortConditions.length) return this.filteredData;
 
             const data = [...this.filteredData];
-
-            return data.sort((a, b) => {
-                for (const condition of this.sortConditions) {
-                    const { field, order } = condition;
-                    let valA = a[field];
-                    let valB = b[field];
-
-                    if (this.sortMethod) {
-                        const result = this.sortMethod(a, b, field);
-                        if (result !== 0) return result * (order === 'ascending' ? 1 : -1);
-                    }
+
+            return data.sort((a, b) => {
+                for (const condition of this.sortConditions) {
+                    const { field, order, column } = condition;
+                    const sortBy = column ? this.getColumnSortBy(column) : this.sortBy;
+                    let valA = this.getSortValueBy(a, field, sortBy);
+                    let valB = this.getSortValueBy(b, field, sortBy);
+
+                    if (this.sortMethod) {
+                        const result = this.sortMethod(a, b, field, this.context);
+                        if (result !== 0) return result * (order === 'ascending' ? 1 : -1);
+                    }
 
                     if (valA < valB) return order === 'ascending' ? -1 : 1;
                     if (valA > valB) return order === 'ascending' ? 1 : -1;
@@ -509,12 +534,13 @@ export default {
     },
     watch: {
         // 将setup中的watch转换为watch属性
-        expandRowKeys: {
-            handler(newVal) {
-                this.expandedKeys = [...newVal];
-            },
-            immediate: true
-        },
+        expandRowKeys: {
+            handler(newVal) {
+                this.expandedKeys = [...newVal];
+                this.initDefaultExpandAll();
+            },
+            immediate: true
+        },
         currentRowKey: {
             handler(newVal) {
                 const found = this.data.find(item => item[this.rowKey] === newVal);
@@ -524,13 +550,22 @@ export default {
             },
             immediate: true
         },
-        columns: {
-            handler() {
-                // this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');
-            },
-            deep: true,
-            immediate: false
-        }
+        columns: {
+            handler() {
+                // this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');
+            },
+            deep: true,
+            immediate: false
+        },
+        data: {
+            handler() {
+                this.initDefaultExpandAll();
+            },
+            deep: true
+        },
+        defaultExpandAll() {
+            this.initDefaultExpandAll();
+        }
     },
     methods: {
         addUnit,
@@ -546,7 +581,8 @@ export default {
                 row,
                 column,
                 rowIndex,
-                columnIndex
+                columnIndex,
+                context: this.context
             });
 
             if (Array.isArray(result)) {
@@ -592,6 +628,12 @@ export default {
 
             return style;
         },
+        getRowStyle(row, rowIndex, level = 1, parentRow = null) {
+            if (typeof this.rowStyle === 'function') {
+                return this.rowStyle({ row, rowIndex, level, parentRow, context: this.context }) || {};
+            }
+            return this.rowStyle || {};
+        },
         onScroll(e) {
             this.scrollLeft = e.detail.scrollLeft;
             // 获取所有左侧固定列
@@ -614,12 +656,89 @@ export default {
             return style;
         },
         
-        getFixedClass(col) {
-            return ''; // 不再使用原来的固定列样式类
-        },
-        
-        headerColStyle(col) {
-            let style = {
+        getFixedClass(col) {
+            return ''; // 不再使用原来的固定列样式类
+        },
+
+        isOverflowTooltipEnabled(column) {
+            if (column && column.type === 'selection') {
+                return false;
+            }
+            if (column && typeof column.showOverflowTooltip !== 'undefined') {
+                return !!column.showOverflowTooltip;
+            }
+            return !!this.showOverflowTooltip;
+        },
+
+        isColumnSortable(column) {
+            return typeof column.sortable !== 'undefined' ? !!column.sortable : !!this.sortable;
+        },
+
+        getColumnSortBy(column) {
+            if (typeof column.sortBy !== 'undefined') {
+                return column.sortBy;
+            }
+            return this.sortBy;
+        },
+
+        getColumnSortOrders(column) {
+            if (Array.isArray(column.sortOrders) && column.sortOrders.length > 0) {
+                return column.sortOrders;
+            }
+            return this.sortOrders;
+        },
+
+        getSortValueBy(row, field, sortBy) {
+            if (typeof sortBy === 'function') {
+                return sortBy(row);
+            }
+            if (Array.isArray(sortBy) && sortBy.length > 0) {
+                return sortBy.map(key => row[key]).join('');
+            }
+            if (typeof sortBy === 'string' && sortBy) {
+                return row[sortBy];
+            }
+            return row[field];
+        },
+
+        hasExpandableChildren(row) {
+            if (!row) {
+                return false;
+            }
+            const children = row[this.treeProps.children];
+            return (Array.isArray(children) && children.length > 0) || !!row[this.treeProps.hasChildren];
+        },
+
+        isLazyLoading(row) {
+            return this.lazyLoadingKeys.includes(row[this.rowKey]);
+        },
+
+        initDefaultExpandAll() {
+            if (!this.defaultExpandAll) {
+                return;
+            }
+            const keys = [];
+            const childrenKey = this.treeProps.children;
+            const walk = (rows) => {
+                if (!Array.isArray(rows)) {
+                    return;
+                }
+                rows.forEach(row => {
+                    if (!row) {
+                        return;
+                    }
+                    if (this.hasExpandableChildren(row)) {
+                        keys.push(row[this.rowKey]);
+                    }
+                    walk(row[childrenKey]);
+                });
+            };
+            walk(this.data);
+            this.expandedKeys = Array.from(new Set([...this.expandedKeys, ...keys]));
+        },
+
+        headerColStyle(col) {
+            let style = {
                 width: col.width ? addUnit(col.width) : 'auto',
                 flex: col.width ? 'none' : 1
             };
@@ -641,11 +760,11 @@ export default {
             if (scope.column.key == this.computedMainCol) {
                 style.paddingLeft = (16 * (scope.level -1 )) + 2 + 'px'
             }
-			if (this.cellStyle != null) {
-				let styleCalc = this.cellStyle(scope)
-				if (styleCalc != null) {
-					style = {...style, ...styleCalc}
-				}
+			if (this.cellStyle != null) {
+				let styleCalc = this.cellStyle({...scope, context: this.context})
+				if (styleCalc != null) {
+					style = {...style, ...styleCalc}
+				}
 			}
 			return style;
 		},
@@ -678,31 +797,35 @@ export default {
             }
             this.$emit('row-click', row);
         },
-        handleHeaderClick(column) {
-            if (!column.sortable) return;
-
-            const index = this.sortConditions.findIndex(c => c.field === column.key);
-            let newOrder = 'ascending';
-
-            if (index >= 0) {
-                if (this.sortConditions[index].order === 'ascending') {
-                    newOrder = 'descending';
-                } else {
-                    this.sortConditions.splice(index, 1);
-                    this.$emit('sort-change', this.sortConditions);
+        handleHeaderClick(column) {
+            if (!this.isColumnSortable(column)) return;
+
+            const index = this.sortConditions.findIndex(c => c.field === column.key);
+            const sortOrders = this.getColumnSortOrders(column).filter(Boolean);
+            let newOrder = sortOrders[0] || 'ascending';
+
+            if (index >= 0) {
+                const currentOrder = this.sortConditions[index].order;
+                const nextIndex = sortOrders.indexOf(currentOrder) + 1;
+                if (nextIndex > 0 && nextIndex < sortOrders.length) {
+                    newOrder = sortOrders[nextIndex];
+                } else {
+                    this.sortConditions.splice(index, 1);
+                    this.$emit('sort-change', this.sortConditions);
                     return;
                 }
             }
-
-            if (!this.multiSort) {
-                this.sortConditions = [{ field: column.key, order: newOrder }];
-            } else {
-                if (index >= 0) {
-                    this.sortConditions[index].order = newOrder;
-                } else {
-                    this.sortConditions.push({ field: column.key, order: newOrder });
-                }
-            }
+
+            if (!this.multiSort) {
+                this.sortConditions = [{ field: column.key, order: newOrder, column }];
+            } else {
+                if (index >= 0) {
+                    this.sortConditions[index].order = newOrder;
+                    this.sortConditions[index].column = column;
+                } else {
+                    this.sortConditions.push({ field: column.key, order: newOrder, column });
+                }
+            }
 
             this.$emit('sort-change', this.sortConditions);
         },
@@ -733,17 +856,50 @@ export default {
             this.$emit('selection-change', this.selectedRows);
             this.$emit('select', row);
         },
-        toggleExpand(row) {
-            // console.log(row)
-            const key = row[this.rowKey];
-            const index = this.expandedKeys.indexOf(key);
-            if (index === -1) {
-                this.expandedKeys.push(key);
-            } else {
-                this.expandedKeys.splice(index, 1);
-            }
-            this.$emit('expand-change', this.expandedKeys);
-        },
+        toggleExpand(row, level = 1) {
+            // console.log(row)
+            const key = row[this.rowKey];
+            const index = this.expandedKeys.indexOf(key);
+            if (index === -1) {
+                this.expandedKeys.push(key);
+                this.loadLazyChildren(row, level);
+            } else {
+                this.expandedKeys.splice(index, 1);
+            }
+            this.$emit('expand-change', this.expandedKeys);
+        },
+        loadLazyChildren(row, level = 1) {
+            if (!this.lazy || typeof this.load !== 'function') {
+                return;
+            }
+            const childrenKey = this.treeProps.children;
+            const key = row[this.rowKey];
+            const children = row[childrenKey];
+            if ((Array.isArray(children) && children.length > 0) || this.lazyLoadingKeys.includes(key)) {
+                return;
+            }
+
+            this.lazyLoadingKeys.push(key);
+            const resolve = (childrenList = []) => {
+                row[childrenKey] = Array.isArray(childrenList) ? childrenList : [];
+                this.lazyLoadingKeys = this.lazyLoadingKeys.filter(item => item !== key);
+                this.getComponentWidth();
+            };
+
+            const result = this.load(row, {
+                row,
+                level,
+                expanded: this.isExpanded(row),
+                loading: true,
+                context: this.context
+            }, resolve);
+
+            if (result && typeof result.then === 'function') {
+                result.then(resolve).catch(() => {
+                    this.lazyLoadingKeys = this.lazyLoadingKeys.filter(item => item !== key);
+                });
+            }
+        },
         isExpanded(row) {
             if (!row) {
                 return false;
@@ -839,6 +995,8 @@ export default {
         display: flex;
         flex-direction: row;
         align-items: center;
+        min-width: 0;
+        box-sizing: border-box;
         padding: 10px 1px;
         font-size: 14px;
         white-space: nowrap;
@@ -861,6 +1019,36 @@ export default {
         }
     }
 
+    .u-table-cell_content {
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+        flex: 1;
+        box-sizing: border-box;
+        display: block;
+        text-align: inherit;
+    }
+
+    .u-table-cell_text {
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+        display: block;
+        box-sizing: border-box;
+        text-align: inherit;
+    }
+
+    .u-table-cell_content-overflow,
+    .u-table-cell_content-overflow .u-table-cell_text {
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     .u-table-row-zebra {
         background-color: var(--up-table2-zebra-bg-color, rgba(255, 255, 255, 0.03));
     }