Vue中Element UI: 在div内动态添加el-row并按顺序插入内容

<template>
  <div>
    <div>
      <button @click="addRow">添加行</button>
    </div>
    <div>
      <el-row v-for="(row, index) in rows" :key="index">
        <!-- 在这里可以添加 el-col 或其他元素 -->
        <el-col :span="12">第 {{ index + 1 }} 行</el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rows: []
    };
  },
  methods: {
    addRow() {
      this.rows.push({});
    }
  }
};
</script>
<p>在上面的示例中，点击&quot;添加行&quot;按钮会触发<code>addRow</code>方法，该方法会将一个空对象添加到<code>rows</code>数组中。然后，<code>v-for</code>指令会遍历<code>rows</code>数组，在每次循环中生成一个<code>el-row</code>组件，并将其渲染到<code>div</code>中。</p>
<p>请注意，上面的示例只是一个基本的示例，你可以根据自己的需求定制化和扩展。</p>