uview-plus 3.4.27 → 3.4.29

package/changelog.md

@@ -1,3 +1,27 @@
+## 3.4.29（2025-05-15）
+fix: 修复table2横向滚动样式
+
+fix: 修复table2组件宽度兼容
+
+fix: 修复image显示png图片时默认背景色问题
+
+feat: cate-tab新增height参数便于设置组件高度
+
+feat: 在index.js种导出digit.js便于使用
+
+fix: 修复tag组件缺失iconColor属性
+
+fix: 优化index-list的setValueForTouch方法逻辑 #708
+
+feat: number-box支持change事件返回变动是点击了增加还是减少按钮
+
+fix: 修复table2在小程序下部分情形不显示表格
+
+## 3.4.28（2025-05-12）
+feat: 新增table表格组件
+
+feat: 新增element-plus风格的table2组件
+
 ## 3.4.27（2025-05-06）
 fix: 修复card组件props
 

package/components/u-cate-tab/u-cate-tab.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="u-cate-tab">
+	<view class="u-cate-tab" :style="{ height: addUnit(height) }">
 		<view class="u-cate-tab__wrap">
 			<scroll-view class="u-cate-tab__view u-cate-tab__menu-scroll-view"
                 scroll-y scroll-with-animation :scroll-top="scrollTop"
@@ -41,9 +41,14 @@
 	</view>
 </template>
 <script>
+	import { addUnit } from '../../libs/function/index';
 	export default {
 		name: 'up-cate-tab',
         props: {
+			height: {
+                type: String,
+                default: '100%'
+            },
             tabList: {
                 type: Array,
                 default: () => {
@@ -57,7 +62,7 @@
             itemKeyName: {
                 type: String,
                 default: 'name'
-            },
+            },
 			current: {
                 type: Number,
                 default: 0
@@ -67,7 +72,7 @@
             tabList() {
                 this.getMenuItemTop()
             }
-        },
+        },
 		emits: ['update:current'],
 		data() {
 			return {
@@ -84,18 +89,19 @@
 				timer: null, // 定时器
 			}
 		},
-		onMounted() {
-			this.innerCurrent = this.current;
+		onMounted() {
+			this.innerCurrent = this.current;
 			this.leftMenuStatus(this.innerCurrent);
 			this.getMenuItemTop()
-		},
-		watch: {
-			current(nval) {
-				this.innerCurrent = nval;
-				this.leftMenuStatus(this.innerCurrent);
-			}
+		},
+		watch: {
+			current(nval) {
+				this.innerCurrent = nval;
+				this.leftMenuStatus(this.innerCurrent);
+			}
 		},
 		methods: {
+			addUnit,
 			// 点击左边的栏目切换
 			async swichMenu(index) {
 				if(this.arr.length == 0) {
@@ -106,7 +112,7 @@
 				this.$nextTick(function(){
 					this.scrollRightTop = this.arr[index];
 					this.innerCurrent = index;
-					this.leftMenuStatus(index);
+					this.leftMenuStatus(index);
 					this.$emit('update:current', index);
 				})
 			},
@@ -140,14 +146,14 @@
 					}).observe('#item' + index, res => {
 						if (res.intersectionRatio > 0) {
 							let id = res.id.substring(4);
-							this.leftMenuStatus(id);
+							this.leftMenuStatus(id);
 						}
 					})
 				})
 			},
 			// 设置左边菜单的滚动状态
 			async leftMenuStatus(index) {
-				this.innerCurrent = index;
+				this.innerCurrent = index;
 				this.$emit('update:current', index);
 				// 如果为0，意味着尚未初始化
 				if (this.menuHeight == 0 || this.menuItemHeight == 0) {

package/components/u-image/u-image.vue

@@ -45,7 +45,10 @@
 				v-if="showError && isError && !loading"
 				class="u-image__error"
 				:style="{
-					borderRadius: shape == 'circle' ? '50%' : addUnit(radius)
+					borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+					backgroundColor: this.bgColor,
+					width: addUnit(width),
+					height: addUnit(height)
 				}"
 			>
 				<slot name="error">
@@ -220,9 +223,9 @@
 			// 移除图片的背景色
 			removeBgColor() {
 				// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
-				this.backgroundStyle = {
-					backgroundColor: this.bgColor || '#ffffff'
-				};
+				// this.backgroundStyle = {
+				// 	backgroundColor: this.bgColor || '#ffffff'
+				// };
 			}
 		}
 	};

package/components/u-index-list/u-index-list.vue

@@ -419,7 +419,7 @@
 					return child
 				})
 				// console.log('this.children[currentIndex].top', children[currentIndex].top)
-				if (children[currentIndex]?.top) {
+				if (children[currentIndex]?.top || children[currentIndex].top === 0) {
 					this.scrollTop = children[currentIndex].top - getPx(customNavHeight)
 				}
 				// #endif

package/components/u-number-box/u-number-box.vue

@@ -331,8 +331,8 @@
 				// #endif 
 			
 			},
-			// 发出change事件
-			emitChange(value) {
+			// 发出change事件，type目前只支持点击时有值，手动输入不支持。
+			emitChange(value, type = '') {
 				// 如果开启了异步变更值，则不修改内部的值，需要用户手动在外部通过v-model变更
 				if (!this.asyncChange) {
 					this.$nextTick(() => {
@@ -349,6 +349,7 @@
 				this.$emit('change', {
 					value,
 					name: this.name,
+					type: type // 当前变更类型
 				});
 			},
 			onChange() {
@@ -360,7 +361,7 @@
 				}
 				const diff = type === 'minus' ? -this.step : +this.step
 				const value = this.format(this.add(+this.currentValue, diff))
-				this.emitChange(value)
+				this.emitChange(value, type)
 				this.$emit(type)
 			},
 			// 对值扩大后进行四舍五入，再除以扩大因子，避免出现浮点数操作的精度问题

package/components/u-table/u-table.vue

@@ -1,6 +1,8 @@
 <template>
-	<view class="u-table">
-		
+	<view class="u-table" :style="[tableStyle]">
+		<template v-if="show">
+			<slot />
+		</template>
 	</view>
 </template>
 
@@ -12,14 +14,86 @@
 	 * Table 表格 
 	 * @description 表格组件一般用于展示大量结构化数据的场景 本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成
 	 * @tutorial https://ijry.github.io/uview-plus/components/table.html
+	 * @property {String} border-color 表格边框的颜色（默认#e4e7ed）
+	 * @property {String} bg-color 表格的背景颜色（默认#ffffff）
+	 * @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
+	 * @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
+	 * @property {String Number} font-size 单元格字体大小，单位rpx（默认28）
+	 * @property {String} color 单元格字体颜色（默认#606266）
+	 * @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
 	 * @example <u-table><u-tr><u-th>学校</u-th </u-tr> <u-tr><u-td>浙江大学</u-td> </u-tr> <u-tr><u-td>清华大学</u-td> </u-tr></u-table>
 	 */
 	export default {
 		name: 'u-table',
 		mixins: [mpMixin, mixin, props],
+		props: {
+			borderColor: {
+				type: String,
+				default: '#e4e7ed'
+			},
+			align: {
+				type: String,
+				default: 'center'
+			},
+			// td的内边距
+			padding: {
+				type: String,
+				default: '5px 3px'
+			},
+			// 字体大小
+			fontSize: {
+				type: [String],
+				default: '14px'
+			},
+			// 字体颜色
+			color: {
+				type: String,
+				default: '#606266'
+			},
+			// th的自定义样式
+			thStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// table的背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			}
+		},
 		data() {
 			return {
-				
+				show: true
+			}
+		},
+		watch: {
+			align() {
+				this.change();
+			},
+			borderColor() {
+				this.change();
+			}
+		},
+		computed: {
+			tableStyle() {
+				let style = {};
+				style.borderLeft = `solid 1px ${this.borderColor}`;
+				style.borderTop = `solid 1px ${this.borderColor}`;
+				style.backgroundColor = this.bgColor;;
+				return style;
+			}
+		},
+		methods: {
+			change() {
+				this.show = false;
+				this.$nextTick(() => {
+					this.show = true;
+				});
+				// this.$forceUpdate();
 			}
 		}
 	}

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

@@ -0,0 +1,474 @@
+<template>
+    <view scroll-x class="u-table2" :style="{ height: height ? height + 'px' : 'auto' }">
+        <!-- 表头 -->
+        <view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }" :style="{minWidth: scrollWidth}">
+            <view class="u-table-row">
+                <view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"
+                    :style="{ width: col.width ? addUnit(col.width) : 'auto', flex: col.width ? 'none' : 1 }" :class="[
+                        col.align ? 'u-text-' + col.align : '',
+                        headerCellClassName ? headerCellClassName(col) : '',
+                        col.fixed === 'left' ? 'u-table-fixed-left' : '',
+                        col.fixed === 'right' ? 'u-table-fixed-right' : ''
+                    ]" @click="handleHeaderClick(col)">
+                    {{ col.title }}
+                    <view v-if="col.sortable">
+                        {{ getSortIcon(col.key) }}
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 表体 -->
+        <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
+            <template v-if="data && data.length > 0">
+                <template v-for="(row, index) in sortedData" :key="row[rowKey] || index">
+                    <view class="u-table-row" :class="[
+                        highlightCurrentRow && currentRow === row ? 'u-table-row-highlight' : '',
+                        rowClassName ? rowClassName(row, index) : '',
+                        stripe && index % 2 === 1 ? 'u-table-row-zebra' : ''
+                    ]" @click="handleRowClick(row)">
+                        <view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell" :class="[
+                            col.align ? 'u-text-' + col.align : '',
+                            cellClassName ? cellClassName(row, col) : '',
+                            col.fixed === 'left' ? 'u-table-fixed-left' : '',
+                            col.fixed === 'right' ? 'u-table-fixed-right' : ''
+                        ]" :style="{ width: col.width ? addUnit(col.width) : 'auto', flex: col.width ? 'none' : 1 }">
+                            <!-- 复选框列 -->
+                            <view v-if="col.type === 'selection'">
+                                <checkbox :checked="isSelected(row)" @click.stop="toggleSelect(row)" />
+                            </view>
+
+                            <!-- 树形结构展开图标 -->
+                            <view v-else-if="col.type === 'expand'" @click.stop="toggleExpand(row)">
+                                {{ isExpanded(row) ? '▼' : '▶' }}
+                            </view>
+
+                            <!-- 默认插槽或文本 -->
+                            <slot name="cell" :row="row" :col="col">
+                                <view class="u-table-cell_content">
+                                    {{ row[col.key] }}
+                                </view>
+                            </slot>
+                        </view>
+                    </view>
+
+                    <!-- 子级渲染 -->
+                    <template v-if="isExpanded(row) && row[treeProps.children] && row[treeProps.children].length">
+                        <view v-for="child in row[treeProps.children]" :key="child[rowKey]"
+                            class="u-table-row u-table-row-child">
+                            <view v-for="col in columns" :key="col.key" class="u-table-cell"
+                                :style="{ width: col.width ? addUnit(col.width) : 'auto', paddingLeft: '24px', flex: col.width ? 'none' : 1 }">
+                                <slot name="cell" :row="child" :col="col">
+                                    <view class="u-table-cell_content">
+                                        {{ child[col.key] }}
+                                    </view>
+                                </slot>
+                            </view>
+                        </view>
+                    </template>
+                </template>
+            </template>
+            <template v-else>
+                <slot name="empty">
+                    <view class="u-table-empty">{{ emptyText }}</view>
+                </slot>
+            </template>
+        </view>
+    </view>
+</template>
+
+<script>
+import { ref, watch, computed } from 'vue'
+import { addUnit, sleep } from '../../libs/function/index';
+
+export default {
+    name: 'u-table2',
+    props: {
+        data: {
+            type: Array,
+            required: true,
+            default: () => {
+                return []
+            }
+        },
+        columns: {
+            type: Array,
+            required: true,
+            default: () => {
+                return []
+            },
+            validator: cols =>
+                cols.every(col =>
+                    ['default', 'selection', 'expand'].includes(col.type || 'default')
+                )
+        },
+        stripe: {
+            type: Boolean,
+            default: false
+        },
+        border: {
+            type: Boolean,
+            default: false
+        },
+        height: {
+            type: [String, Number],
+            default: null
+        },
+        maxHeight: {
+            type: [String, Number],
+            default: null
+        },
+        showHeader: {
+            type: Boolean,
+            default: true
+        },
+        highlightCurrentRow: {
+            type: Boolean,
+            default: false
+        },
+        rowKey: {
+            type: String,
+            default: 'id'
+        },
+        currentRowKey: {
+            type: [String, Number],
+            default: null
+        },
+        rowStyle: {
+            type: Object,
+            default: () => ({})
+        },
+        cellClassName: {
+            type: Function,
+            default: null
+        },
+        headerCellClassName: {
+            type: Function,
+            default: null
+        },
+        rowClassName: {
+            type: Function,
+            default: null
+        },
+        context: {
+            type: Object,
+            default: null
+        },
+        showOverflowTooltip: {
+            type: Boolean,
+            default: false
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        load: {
+            type: Function,
+            default: null
+        },
+        treeProps: {
+            type: Object,
+            default: () => ({
+                children: 'children',
+                hasChildren: 'hasChildren'
+            })
+        },
+        defaultExpandAll: {
+            type: Boolean,
+            default: false
+        },
+        expandRowKeys: {
+            type: Array,
+            default: () => []
+        },
+        sortOrders: {
+            type: Array,
+            default: () => ['ascending', 'descending']
+        },
+        sortable: {
+            type: [Boolean, String],
+            default: false
+        },
+        multiSort: {
+            type: Boolean,
+            default: false
+        },
+        sortBy: {
+            type: String,
+            default: null
+        },
+        sortMethod: {
+            type: Function,
+            default: null
+        },
+        filters: {
+            type: Object,
+            default: () => ({})
+        },
+        fixedHeader: {
+            type: Boolean,
+            default: true
+        },
+        emptyText: {
+            type: String,
+            default: '暂无数据'
+        },
+    },
+    emits: [
+        'select', 'select-all', 'selection-change',
+        'cell-click', 'row-click', 'row-dblclick',
+        'header-click', 'sort-change', 'filter-change',
+        'current-change', 'expand-change'
+    ],
+    data() {
+        return {
+            scrollWidth: 'auto'
+        }
+    },
+    mounted() {
+        this.getComponentWidth()
+    },
+    methods: {
+        addUnit,
+        // 获取组件的宽度
+		async getComponentWidth() {
+			// 延时一定时间，以获取dom尺寸
+			await sleep(30)
+			this.$uGetRect('.u-table-row').then(size => {
+				this.scrollWidth = size.width + 'px'
+			})
+		},
+    },
+    setup(props, { emit }) {
+        const expandedKeys = ref([...props.expandRowKeys]);
+        const selectedRows = ref([]);
+        const sortConditions = ref([]);
+
+        // 当前高亮行
+        const currentRow = ref(null);
+
+        watch(
+            () => props.expandRowKeys,
+            newVal => {
+                expandedKeys.value = [...newVal];
+            }
+        );
+
+        watch(
+            () => props.currentRowKey,
+            newVal => {
+                const found = props.data.find(item => item[props.rowKey] === newVal);
+                if (found) {
+                    currentRow.value = found;
+                }
+            }
+        );
+
+        // 过滤后的数据
+        const filteredData = computed(() => {
+            return props.data.filter(row => {
+                return Object.keys(props.filters).every(key => {
+                    const filter = props.filters[key];
+                    if (!filter) return true;
+                    return row[key]?.toString().includes(filter.toString());
+                });
+            });
+        });
+
+        // 排序后的数据
+        const sortedData = computed(() => {
+            if (!sortConditions.value.length) return filteredData.value;
+
+            const data = [...filteredData.value];
+
+            return data.sort((a, b) => {
+                for (const condition of sortConditions.value) {
+                    const { field, order } = condition;
+                    let valA = a[field];
+                    let valB = b[field];
+
+                    if (props.sortMethod) {
+                        const result = props.sortMethod(a, b, field);
+                        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;
+                }
+                return 0;
+            });
+        });
+
+        function handleRowClick(row) {
+            if (props.highlightCurrentRow) {
+                const oldRow = currentRow.value;
+                currentRow.value = row;
+                emit('current-change', row, oldRow);
+            }
+            emit('row-click', row);
+        }
+
+        function handleHeaderClick(column) {
+            if (!column.sortable) return;
+
+            const index = sortConditions.value.findIndex(c => c.field === column.key);
+            let newOrder = 'ascending';
+
+            if (index >= 0) {
+                if (sortConditions.value[index].order === 'ascending') {
+                    newOrder = 'descending';
+                } else {
+                    sortConditions.value.splice(index, 1);
+                    emit('sort-change', sortConditions.value);
+                    return;
+                }
+            }
+
+            if (!props.multiSort) {
+                sortConditions.value = [{ field: column.key, order: newOrder }];
+            } else {
+                if (index >= 0) {
+                    sortConditions.value[index].order = newOrder;
+                } else {
+                    sortConditions.value.push({ field: column.key, order: newOrder });
+                }
+            }
+
+            emit('sort-change', sortConditions.value);
+        }
+
+        function getSortIcon(field) {
+            const cond = sortConditions.value.find(c => c.field === field);
+            if (!cond) return '';
+            return cond.order === 'ascending' ? '↑' : '↓';
+        }
+
+        function toggleSelect(row) {
+            const index = selectedRows.value.findIndex(r => r[props.rowKey] === row[props.rowKey]);
+            if (index >= 0) {
+                selectedRows.value.splice(index, 1);
+            } else {
+                selectedRows.value.push(row);
+            }
+            emit('selection-change', selectedRows.value);
+            emit('select', row);
+        }
+
+        function isSelected(row) {
+            return selectedRows.value.some(r => r[props.rowKey] === row[props.rowKey]);
+        }
+
+        function toggleExpand(row) {
+            const key = row[props.rowKey];
+            const index = expandedKeys.value.indexOf(key);
+            if (index === -1) {
+                expandedKeys.value.push(key);
+            } else {
+                expandedKeys.value.splice(index, 1);
+            }
+            emit('expand-change', expandedKeys.value);
+        }
+
+        function isExpanded(row) {
+            return expandedKeys.value.includes(row[props.rowKey]);
+        }
+
+        return {
+            currentRow,
+            sortedData,
+            expandedKeys,
+            selectedRows,
+            sortConditions,
+            handleRowClick,
+            handleHeaderClick,
+            getSortIcon,
+            toggleSelect,
+            isSelected,
+            toggleExpand,
+            isExpanded
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.u-table2 {
+    width: auto;
+    overflow: auto;
+    white-space: nowrap;
+
+    .u-table-header {
+        min-width: 100% !important;
+        width: fit-content;
+        background-color: #f5f7fa;
+    }
+
+    .u-table-body {
+        min-width: 100% !important;
+        width: fit-content;
+    }
+
+    .u-table-sticky {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    .u-table-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1rpx solid #ebeef5;
+        overflow: hidden;
+    }
+
+    .u-table-cell {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        padding: 5px 4px;
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .u-table-fixed-left {
+        position: sticky;
+        left: 0;
+        z-index: 9;
+    }
+
+    .u-table-fixed-right {
+        position: sticky;
+        right: 0;
+        z-index: 9;
+    }
+
+    .u-table-row-zebra {
+        background-color: #fafafa;
+    }
+
+    .u-table-row-highlight {
+        background-color: #f5f7fa;
+    }
+
+    .u-table-empty {
+        text-align: center;
+        padding: 20px;
+        color: #999;
+    }
+
+    .u-text-left {
+        text-align: left;
+    }
+
+    .u-text-center {
+        text-align: center;
+    }
+
+    .u-text-right {
+        text-align: right;
+    }
+}
+</style>

package/components/u-tag/props.js

@@ -82,6 +82,11 @@ export const props = defineMixin({
             type: String,
             default: () => defProps.tag.icon,
 		},
+        // 图标颜色
+        iconColor: {
+            type: String,
+            default: () => defProps.tag.iconColor,
+		},
         // 自定义尺寸字体大小
 		textSize: {
             type: String,

package/components/u-td/u-td.vue

@@ -1,6 +1,6 @@
 <template>
-	<view class="u-td">
-		
+	<view class="u-td" :style="[tdStyle]">
+		<slot></slot>
 	</view>
 </template>
 
@@ -8,6 +8,7 @@
 	import { props } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, $parent } from '../../libs/function/index';
 	/** 
 	 * Td 表格中的单元格
 	 * @description 
@@ -19,9 +20,36 @@
 	export default {
 		name: 'u-td',
 		mixins: [mpMixin, mixin, props],
+		props: {
+			// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
+			width: {
+				type: [String],
+				default: 'auto'
+			}
+		},
 		data() {
 			return {
-				
+				tdStyle: {
+					
+				}
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			this.parent = $parent.call(this, 'u-table');
+			if (this.parent) {
+				// 将父组件的相关参数，合并到本组件
+				let style = {};
+				if (this.width != "auto") style.flex = `0 0 ${this.width}`;
+				style.textAlign = this.parent.align;
+				style.fontSize = addUnit(this.parent.fontSize);
+				style.padding = this.parent.padding;
+				style.borderBottom = `solid 1px ${this.parent.borderColor}`;
+				style.borderRight = `solid 1px ${this.parent.borderColor}`;
+				style.color = this.parent.color;
+				this.tdStyle = style;
 			}
 		}
 	}
@@ -29,5 +57,15 @@
 
 <style lang="scss" scoped>
 	@import "../../libs/css/components.scss";
-	
+	.u-td {
+		@include flex;
+		flex-direction: column;
+		flex: 1;
+		justify-content: center;
+		font-size: 14px;
+		color: $u-content-color;
+		align-self: stretch;
+		box-sizing: border-box;
+		height: 100%;
+	}
 </style>

package/components/u-th/props.js

@@ -0,0 +1,7 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+
+    }
+})

package/components/u-th/u-th.vue

@@ -0,0 +1,67 @@
+<template>
+	<view class="u-th" :style="[thStyle]">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, $parent } from '../../libs/function/index';
+	/** 
+	 * Td 表格中的单元格
+	 * @description 
+	 * @tutorial url
+	 * @property {String | Number} 
+	 * @event {Function}
+	 * @example
+	 */
+	export default {
+		name: 'u-th',
+		mixins: [mpMixin, mixin, props],
+		props: {
+			// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
+			width: {
+				type: [String],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				thStyle: {}
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			this.parent = $parent.call(this, 'u-table');
+			if (this.parent) {
+				// 将父组件的相关参数，合并到本组件
+				let style = {};
+				if (this.width) style.flex = `0 0 ${this.width}`;
+				style.textAlign = this.parent.align;
+				style.padding = this.parent.padding;
+				style.borderBottom = `solid 1px ${this.parent.borderColor}`;
+				style.borderRight = `solid 1px ${this.parent.borderColor}`;
+				Object.assign(style, this.parent.thStyle);
+				this.thStyle = style;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	.u-th {
+		@include flex;
+		flex-direction: column;
+		flex: 1;
+		justify-content: center;
+		font-size: 28rpx;
+		color: $u-main-color;
+		font-weight: bold;
+		background-color: rgb(245, 246, 248);
+	}
+</style>

package/components/u-tr/u-tr.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="u-tr">
-		
+		<slot></slot>
 	</view>
 </template>
 
@@ -29,5 +29,7 @@
 
 <style lang="scss" scoped>
 	@import "../../libs/css/components.scss";
-	
+	.u-tr {
+		@include flex;
+	}
 </style>

package/index.js

@@ -19,6 +19,8 @@ import debounce from './libs/function/debounce.js'
 import throttle from './libs/function/throttle.js'
 // 浮点计算
 import calc from './libs/function/calc.js'
+// 浮点计算
+import digit from './libs/function/digit.js'
 // 公共文件写入的方法
 import index from './libs/function/index.js'
 
@@ -38,7 +40,7 @@ import http from './libs/function/http.js'
 
 // 导出
 let themeType = ['primary', 'success', 'error', 'warning', 'info'];
-export { route, http, debounce, throttle, calc, platform, themeType, mixin, mpMixin, props, color, test, zIndex }
+export { route, http, debounce, throttle, calc, digit, platform, themeType, mixin, mpMixin, props, color, test, zIndex }
 export * from './libs/function/index.js'
 export * from './libs/function/colorGradient.js'
 

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。",
-	"version": "3.4.27",
+	"version": "3.4.29",
 	"description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水。",
 	"keywords": [
         "uview",