用vue写一个明细组件

好的，以下是一个简单的 Vue 明细组件的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(record, index) in records" :key="index">
          <td v-for="(value, key) in record" :key="key">{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "DetailComponent",
  props: {
    headers: {
      type: Array,
      required: true
    },
    records: {
      type: Array,
      required: true
    }
  }
};
</script>

这个组件接收两个 props，一个是 headers，表示列头的字段名，一个是 records，表示具体的数据记录。组件内部使用了 table、thead、tbody 和 tr 等 HTML 标签来展示数据，循环遍历 props 中的 headers 和 records 来动态生成表头和表格内容。这样，你就可以通过传递不同的数据来使用这个明细组件了。