dz-app/pages/ie/entry-single-result/components/enroll-table.vue

<template>
    <view class="enroll-table">
        <table class="w-full">
            <tr class="fx-row mt-10" :class="compact?'gap-10':'gap-20'">
                <th class="rounded text-2xs fx-row fx-cen-cen" :class="head.clazz||'flex-1'"
                    v-for="(head, i) in headers">
                    {{ head.label }}
                </th>
            </tr>
            <template v-if="data.length">
                <tr class="fx-row mt-10" :class="compact?'gap-10':'gap-20'" v-for="(item, i) in data">
                    <td class="rounded text-2xs fx-row fx-cen-cen" v-for="hd in headers" :key="hd.prop"
                        :class="hd.clazz||'flex-1'">
                        <slot :name="hd.slotBody" v-bind="{display: item[hd.prop], item}">
                            {{ item[hd.prop] || '-' }}
                        </slot>
                    </td>
                </tr>
            </template>
            <view v-else class="no-data mt-20 rounded text-2xs text-tips text-center">暂无数据</view>
        </table>
    </view>
</template>
<script>
export default {
    props: {
        headers: {
            type: Array,
            default: () => []
        },
        data: {
            type: Array,
            default: () => []
        },
        compact: {
            type: Boolean,
            default: false
        }
    }
};
</script>
<style lang="scss" scoped>
.enroll-table {

    th,
    td {
        min-height: 48rpx;
        padding: 6rpx 12rpx;
    }

    th {
        color: #2B68F6;
        background-color: #DAE4FD;
    }

    td {
        background-color: #F1F2F3;
    }

    .no-data {
        background-color: #F1F2F3;
        height: 70px;
        line-height: 70px;
    }
}
</style>