element表格渲染两个内容根据相同的字显示在一行

您可以使用 `v-for` 指令来渲染表格数据，并通过 `v-if` 指令来判断两个相邻的单元格是否应该合并为同一行。具体实现方法如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>爱好</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td v-if="index > 0 && item.hobby === tableData[index - 1].hobby"></td>
          <td v-else>{{ item.hobby }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, hobby: '篮球' },
        { name: '李四', age: 22, hobby: '游泳' },
        { name: '王五', age: 25, hobby: '篮球' },
        { name: '赵六', age: 21, hobby: '足球' },
        { name: '田七', age: 23, hobby: '游泳' }
      ]
    }
  }
}
</script>

在上面的代码中，我们使用 `v-for` 指令来遍历 `tableData` 数组，使用 `v-if` 指令来判断当前行的 `hobby` 是否与上一行的 `hobby` 相同，如果相同，则不渲染该单元格，否则渲染该单元格。这样就可以实现根据相同的字显示在同一行的功能。