hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue

<script setup lang="ts">
const props = defineProps({
  columns: {
    type: Array as () => any[],
    require: true,
  },
  row: {
    type: Array as () => any[],
    require: true,
  },
});
</script>

<template>
  <q-table
    ref="table"
    flat
    bordered
    :columns="props.columns"
    :rows="props.row"
    dense
    :rows-per-page-options="[10, 25, 50, 100]"
    virtual-scroll
    class="row col-12"
  >
    <template v-slot:header="props">
      <q-tr :props="props" class="bg-grey-2">
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span class="text-body2 text-black">{{ col.label }}</span>
        </q-th>
      </q-tr>
    </template>

    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div>
            {{ !col.value ? "-" : col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>
  </q-table>
</template>

<style scoped></style>