新增一个表格vue3

在Vue3中创建一个表格，你可以使用Element UI、Vuetify或自定义组件结合`v-model`和数组数据来实现。以下是使用Element UI库创建一个基础表格的示例：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <!-- 添加更多列... -->
    </el-table>
    <el-button @click="addRow">新增一行</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
        // ... 更多行数据
      ],
    };
  },
  methods: {
    addRow() {
      this.tableData.push({ name: '', age: '' });
    },
  },
};
</script>

在这个例子中，`tableData`是一个数组，每一项代表表格的一行数据。`el-table-column`用于定义表头，`@click`事件监听器触发`addRow`方法，在表格底部添加新的一行。