dtScreen/src/components/ui/TechTable.vue

<template>
    <div class="tech-table-wrapper" :style="height && height !== 'auto' ? { maxHeight: height } : {}">
        <table class="tech-table" cellspacing="0" cellpadding="0">

            <thead>
                <tr>
                    <th v-for="(col, index) in columns" :key="index"
                        :style="{ width: col.width, textAlign: col.align || 'center' }">
                        {{ col.label }}
                    </th>
                </tr>
            </thead>

            <tbody>
                <tr v-if="!data || data.length === 0">
                    <td :colspan="columns.length" class="empty-text">暂无数据</td>
                </tr>

                <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="table-row"
                    @click="handleRowClick(row, rowIndex)">
                    <td
                        v-for="(col, colIndex) in columns"
                        :key="colIndex"
                        :style="{ textAlign: col.align || 'center' }"
                        :title="row[col.key]"
                    >
                        <slot :name="col.key" :row="row" :index="rowIndex">
                            {{ row[col.key] }}
                        </slot>
                    </td>
                </tr>
            </tbody>

        </table>
    </div>
</template>

<script>

export default {
    name: 'TechTable',
    props: {
        // 表头配置：[{ label: '名称', key: 'name', width: '100px' }]
        columns: {
            type: Array,
            required: true
        },
        // 表格数据
        data: {
            type: Array,
            default: () => []
        },
       // 允许父组件传入高度来限制表格大小并开启滚动
        height: { 
            type: String, 
            default: 'auto' // 默认不限制高度
        }
    },
    methods: {
        // 处理行点击并向外派发事件
        handleRowClick(row, index) {
            this.$emit('row-click', { row, index });
        }
    }
}
</script>

<style scoped>
.tech-table-wrapper {
    flex: 1;
    height: 0;
    min-width: 0;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none; /* 兼容 Firefox 隐藏滚动条 */
    -ms-overflow-style: none; /* 兼容 IE/Edge 隐藏滚动条 */
    container-type: inline-size;
}

.tech-table-wrapper::-webkit-scrollbar {
  display: none; /* 兼容 Chrome/Safari/Edge 隐藏滚动条 */
}

.tech-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* 让宽度分配更稳定 */
}

/* 如果你想让表格内部的滚动条也保持你 base.css 里的科技感，可以加上这个 */
.tech-table-wrapper::-webkit-scrollbar {
  width: 1px; /* 表格滚动条可以稍微细一点 */
}

/* ================= 表头样式 ================= */
.tech-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    color: #6CFFD2;
    font-size: clamp(14px, 2.5cqw, 16px);
    font-weight: 600;
    padding: clamp(4px, 1.5cqw, 10px) clamp(4px, 1.5cqw, 10px);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    background-color: #112446;
}

/* ================= 表体样式 ================= */
.tech-table tbody td {
    color: #ffffff;
    font-size: clamp(14px, 2.5cqw, 16px);
    padding: clamp(10px, 1.5cqw, 15px) clamp(10px, 1.5cqw, 15px);
    /* 文字超出省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 斑马纹：奇数行和偶数行背景色区分 */
.tech-table tbody tr:nth-child(odd) {
    background-color: #152C57;
    /* 偏亮的深蓝色 */
}

.tech-table tbody tr:nth-child(even) {
    background-color: transparent;
    /* 保持底色 */
}

/* 鼠标悬浮高亮反馈 */
.tech-table tbody tr:hover {
    background-color: rgba(43, 220, 255, 0.1);
}

.empty-text {
    text-align: center;
    color: #64748b;
    padding: 30px !important;
}

/* 给数据行增加鼠标手型 */
.tech-table tbody .table-row {
    cursor: pointer;
    transition: background-color 0.2s;
    /* 增加背景色过渡动画 */
}

/* 斑马纹和 hover 效果保持你原来的即可 */
.tech-table tbody .table-row:nth-child(odd) {
    background-color: rgba(30, 50, 90, 0.4);
}

.tech-table tbody .table-row:hover {
    background-color: rgba(43, 220, 255, 0.15);
    /* 稍微调亮一点 hover 颜色反馈更好 */
}
</style>