vue3.0动态表格

### 创建 Vue 3.0 动态表格

在 Vue 3.0 中创建动态表格涉及多个方面，包括数据绑定、事件处理以及条件渲染等内容。下面提供了一个完整的示例，展示了如何利用 `el-table` 组件和 Composition API 来构建一个可以响应变化的数据表。

#### 使用 Element Plus UI 库中的 el-table 实现动态表格

为了简化开发过程并提高用户体验，推荐使用成熟的前端框架如Element Plus提供的`el-table`组件[^2]。此组件支持丰富的配置选项，能够轻松满足大多数场景下的需求。

#### 安装依赖库

首先，在项目中安装必要的包：

npm install element-plus vue@next @vue/runtime-dom

#### 编写模板部分

HTML结构如下所示，通过v-for指令遍历列定义数组columns，并将其映射至对应的<el-table-column>标签内；同时设置prop属性用于指定每列表格所对应的数据字段名。

<template>
  <div class="dynamic-table">
    <!-- 表头 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="(column, index) in columns" :key="index"
        :label="column.label"
        :prop="column.prop"
        align="center">
      </el-table-column>
    </el-table>

    <!-- 添加新行按钮 -->
    <button type="button" @click="addRow">Add Row</button>
  </div>
</template>

#### JavaScript 部分 (Composition API)

接下来是脚本逻辑编写，采用Vue 3的新特性——组合式API来进行状态管理与方法声明:

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

// 初始化表格列信息
const columns = [
  {
    label: "姓名",
    prop: "name"
  },
  {
    label: "年龄",
    prop: "age"
  }
];

// 初始数据源
let tableData = ref([
  {"name": "张三", "age": 28},
]);

function addRow() {
  const newRow = {};
  
  // 自动填充默认值
  columns.forEach(col => {
    newRow[col.prop] = '';
  });

  // 将新增记录追加到现有数据集中
  tableData.value.push(newRow);
}
</script>

上述代码实现了基本功能：显示两列固定标题（姓名、年龄），并通过点击按钮向表格底部增加空白行供用户输入更多条目。当然实际应用时还需要考虑更复杂的交互设计，比如编辑保存等功能扩展[^3]。