el-table-v2 动态高度行实现

`el-table-v2` 是 Element UI 的一个表格组件版本，用于在 Vue.js 应用中创建表格。动态高度的行是指表格行的高度能够根据内容的多少自动调整。这种实现通常用于内容高度不一的情况，比如包含不定量文本或不同大小图片的单元格。

为了在 `el-table-v2` 中实现动态高度的行，你可以采取以下步骤：

1. **自定义布局**：通常情况下，`el-table-v2` 的单元格布局是固定的，如果你需要动态高度，可能需要通过自定义列模板来自定义布局。

2. **监听内容变化**：在单元格内容变化时（例如使用`v-model`绑定数据的输入框），监听内容的变化并计算新的高度。

3. **动态调整样式**：通过计算出的高度值动态地调整单元格的样式属性（例如`min-height`），使得单元格根据内容自适应高度。

4. **使用插槽**：Element UI 提供了插槽（slot），你可以通过具名插槽自定义单元格内容。这样可以根据内容自动调整高度。

5. **观察器计算高度**：在内容变化时使用 JavaScript 的观察器（如 MutationObserver）来动态计算内容高度，并根据计算结果更新行高。

举一个简单的实现例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column label="动态高度">
      <template slot-scope="scope">
        <div :style="{'height': scope.row.dynamicHeight + 'px'}">
          <!-- 动态内容 -->
          {{ scope.row.dynamicContent }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        dynamicContent: '这里是动态内容，可以是一段较长的文本或者HTML代码，当内容长度改变时，高度也会相应调整。'
      }, {
        date: '2016-05-04',
        dynamicContent: '这里是另外一段内容。'
      }]
    };
  },
  watch: {
    'tableData': {
      handler() {
        this.calculateHeights();
      },
      deep: true
    }
  },
  methods: {
    calculateHeights() {
      this.tableData.forEach((row) => {
        // 这里可以添加计算动态高度的逻辑，可能是异步的，比如使用 MutationObserver
        const dynamicHeight = this.measureHeight(row.dynamicContent);
        row.dynamicHeight = dynamicHeight;
      });
    },
    measureHeight(content) {
      // 实现一个函数来测量内容的高度，这里仅为示例，具体实现需要根据实际情况编写
      const dummyElement = document.createElement('div');
      dummyElement.style.position = 'absolute';
      dummyElement.style.visibility = 'hidden';
      dummyElement.style.whiteSpace = 'pre-wrap';
      dummyElement.innerHTML = content;
      document.body.appendChild(dummyElement);
      const height = dummyElement.offsetHeight;
      document.body.removeChild(dummyElement);
      return height;
    }
  }
}
</script>

请注意，实际实现时，你需要考虑性能和效率问题，尤其是当数据量很大或者内容变化频繁时，频繁地调整高度可能会导致性能问题。