element 表单动态添加多条 table

在Vue.js中，如果你想通过Element UI框架动态添加多条表格（table），你可以利用Vue的双向数据绑定、v-for指令以及element-ui的el-table组件。下面是一个简单的示例：

首先，你需要在你的Vue实例中定义一个数组来存储表格的数据，比如：

data() {
  return {
    tablesData: [
      { id: 1, name: 'Table 1', items: [] },
      { id: 2, name: 'Table 2', items: [] }
    ]
  };
},

然后，在模板中，你可以使用v-for循环来遍历这个数组，并为每一条数据创建一个新的表格：

<template>
  <div>
    <el-row v-for="table in tablesData" :key="table.id">
      <el-col :span="6">
        <h4>{{ table.name }}</h4>
      </el-col>

      <el-col :span="18">
        <el-table ref="tableRef" :data="table.items">
          <!-- table列在这里，可以使用{{ item.columnName }}渲染 -->
          <el-table-column prop="columnA" label="Column A"></el-table-column>
          <!-- 添加更多列... -->

          <!-- 动态添加行 -->
          <el-table-row v-for="item in table.items" :key="item.id">
            <el-table-cell :prop="item.prop">{{ item.value }}</el-table-cell>
          </el-table-row>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

在这个例子中，`tablesData`里的每一项都可以有自己的`items`数组，用来填充表格的具体内容。

注意，如果需要在用户交互后动态添加新的行，你可以在Vue实例中定义一个函数，例如`addRow(tableIndex)`，它会创建一个新的表项并将其追加到对应的`table.items`列表中。