FranklinWH-wiki/docs/.vitepress/theme/components/SimpleTable.vue

<template>
  <div class="borderless-table">
    <table v-if="data.length">
      <thead>
        <tr>
          <th v-for="(key, index) in keys" :key="index">
            {{ key }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, rowIndex) in data" :key="rowIndex">
          <td v-for="(key, colIndex) in keys" :key="colIndex">
            {{ item[key] }}
          </td>
        </tr>
      </tbody>
    </table>
    <div v-else class="empty">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface CellDataType {
  [title: string]: string
}

const props = defineProps({
  data: {
    type: Array as PropType<CellDataType[]>,
    default: () => []
  }
})

const keys = computed(() => {
  return props.data.length ? Object.keys(props.data[0]) : []
})

</script>

<style scoped>
.borderless-table table {
  width: 100%;
  border-collapse: collapse;
}

.borderless-table th,
.borderless-table td {
  padding: 8px 12px;
  text-align: left;
  border: none;
}

.borderless-table thead {
  font-weight: bold;
  background-color: #f9f9f9;
}

.borderless-table .empty {
  text-align: center;
  color: #aaa;
  padding: 20px;
}
</style>