经典之Vue 3实现动态数据表格

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="key in keys" :key="key">
            {{ getHeaderName(key) }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td v-for="key in keys" :key="key">
            {{ item[key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John Doe', age: 30, email: 'john@example.com' },
        { id: 2, name: 'Jane Doe', age: 25, email: 'jane@example.com' }
      ],
      keys: ['name', 'age', 'email']
    }
  },
  methods: {
    getHeaderName(key) {
      const headerNames = {
        name: 'Name',
        age: 'Age',
        email: 'Email'
      };
      return headerNames[key] || key;
    }
  }
}
</script>

这个简单的Vue 3组件展示了如何创建一个基本的动态数据表。items数组中包含了一些示例数据，这些数据会被循环渲染到表格的每一行。keys数组定义了每一行中应该显示的字段，并且用getHeaderName方法来处理表头的显示名称。这个例子提供了一个基本的参考，展示了如何将数据和模板结合起来创建动态的用户界面。