<el-row>动态添加时自适应高度

`<el-row>` 是 Element UI 中的一个栅格系统组件，用于创建响应式的行布局。当你需要在运行时动态添加 `<el-row>` 元素，并让其高度能够自动调整以适应内容时，可以利用 Vue.js 的数据驱动特性配合 CSS 的一些技巧。

1. 首先，在 Vue 实例中，你可以维护一个数组，存储每个 `<el-row>` 的数据对象，包括需要渲染的内容和高度信息。

data() {
  return {
    rowsData: [
      { content: 'Row 1', height: 'auto' },
      { content: 'Row 2', height: 'auto' },
      // 更多行...
    ]
  }
}

2. 在模板中，使用 `v-for` 循环遍历这个数组并动态生成 `<el-row>`：

<template>
  <div>
    <el-row v-for="row in rowsData" :key="row.content">
      <el-col>{{ row.content }}</el-col>
    </el-row>
  </div>
</template>

3. 使用 CSS 自动计算行高。例如，通过设置 `.el-row` 的 `flex-wrap` 属性为 `wrap` 和 `min-height` 为 `0`，可以让内容撑开行的高度；如果需要动态计算高度，可以用 JavaScript 设置元素的真实高度，但这种方式可能不是最优，因为这可能会频繁触发浏览器重排和回流。

由于 `el-row` 默认会根据内容自动撑开高度，如果不是特定需求，通常不需要手动计算高度。但在某些特殊场景，如滚动、嵌套等复杂情况，可能需要额外处理。