看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,27 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TextAlign } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * TableProps 表格 props 类型定义
+ * @description 表格组件，支持自定义边框、背景、对齐方式等
+ */
+export const TableProps = {
+    ...baseProps,
+    /** 表格边框的颜色 */
+    borderColor: { type: String, default: 'var(--u-border-color)' },
+    /** 单元格的内容对齐方式，作用类似css的text-align */
+    align: { type: String as PropType<TextAlign>, default: 'center' },
+    /** 单元格的内边距，同css的padding写法 */
+    padding: { type: String, default: '10rpx 6rpx' },
+    /** 单元格字体大小，单位rpx */
+    fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
+    /** 单元格字体颜色 */
+    color: { type: String, default: 'var(--u-content-color)' },
+    /** th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍） */
+    thStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 表格的背景颜色 */
+    bgColor: { type: String, default: 'var(--u-bg-white)' }
+};
+
+export type TableProps = ExtractPropTypes<typeof TableProps>;
@@ -0,0 +1,67 @@
+<template>
+    <view class="u-table" :style="$u.toStyle(tableStyle, customStyle)" :class="customClass">
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-table',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TableProps } from './types';
+import { $u } from '../..';
+
+/**
+ * table 表格
+ * @description 表格组件一般用于展示大量结构化数据的场景
+ * @tutorial https://uviewpro.cn/zh/components/table.html
+ * @property {String} border-color 表格边框的颜色（默认var(--u-border-color)）
+ * @property {String} bg-color 表格的背景颜色（默认var(--u-bg-white)）
+ * @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
+ * @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
+ * @property {String | Number} font-size 单元格字体大小，单位rpx（默认28）
+ * @property {String} color 单元格字体颜色（默认var(--u-content-color)）
+ * @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
+ * @event {Function} click 点击组件时触发
+ * @event {Function} close 点击关闭按钮时触发
+ * @example <u-table></u-table>
+ */
+
+const props = defineProps(TableProps);
+
+/**
+ * 计算表格样式
+ */
+const tableStyle = computed(() => {
+    const style: Record<string, any> = {};
+    style.borderLeft = `solid 1px ${props.borderColor}`;
+    style.borderTop = `solid 1px ${props.borderColor}`;
+    style.backgroundColor = props.bgColor;
+    return style;
+});
+
+defineExpose({
+    props,
+    tableStyle
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-table {
+    width: 100%;
+    box-sizing: border-box;
+}
+</style>