Vue组件实战：动态表格组件开发

<template>  <div class="dynamic-table">    <table>      <thead>        <tr>          <th v-for="column in columns" :key="column.name">{{ column.label }}</th>        </tr>      </thead>      <tbody>        <tr v-for="row in rows" :key="row.id">          <td v-for="column in columns" :key="column.name">{{ row[column.name] }}</td>        </tr>      </tbody>    </table>  </div></template><script>export default {  name: 'DynamicTable',  props: {    data: {      type: Array,      required: true    },    columns: {      type: Array,      required: true    }  },  data() {    return {      rows: []    }  },  created() {    this.rows = this.data;  }}</script><style scoped>.dynamic-table {  width: 100%;}table {  border-collapse: collapse;  width: 100%;}th,td {  padding: 8px;  text-align: left;  border-bottom: 1px solid #ddd;}th {  background-color: #f2f2f2;}</style>

<template>  <div>    <DynamicTable :data="tableData" :columns="tableColumns" />  </div></template><script>import DynamicTable from './DynamicTable.vue';export default {  name: 'App',  components: {    DynamicTable  },  data() {    return {      tableData: [        { id: 1, name: 'John', age: 20 },        { id: 2, name: 'Jane', age: 25 },        { id: 3, name: 'Tom', age: 30 }      ],      tableColumns: [        { name: 'id', label: 'ID' },        { name: 'name', label: 'Name' },        { name: 'age', label: 'Age' }      ]    }  }}</script>