dz-app/pages/career/query-segment/components/segment-score-table.vue

<template>
    <view class="grid" :class="'grid-cols-'+cols.length">
        <view v-for="c in cols" class="flex justify-center items-center py-10" :class="headerClass">
            {{ c.label }}
        </view>
        <template v-for="r in rows">
            <view v-for="c in cols" class="flex justify-center items-center py-24" :class="[rowClass, borderClass]">
                {{ r[c.prop] }}
            </view>
        </template>
    </view>
</template>

<script setup>
import {createPropDefine} from "@/utils";

const props = defineProps({
    cols: createPropDefine([{label: '', prop: ''}], Object),
    rows: createPropDefine([], Array),
    headerClass: createPropDefine('text-xs text-content'),
    rowClass: createPropDefine('text-sm text-main font-bold border-b'),
    borderClass: createPropDefine('border-0 !border-b border border-border border-solid')
})
</script>

<style scoped>

</style>