在el-table中，如何为设置show-overflow-tooltip的单元格添加按钮实现换行展示？

在 Element UI 的 el-table 组件中，show-overflow-tooltip 属性允许你为过长内容的单元格显示一个 tooltip 来显示完整内容，但默认情况下并不支持在 tooltip 内部添加交互元素（如按钮）。

不过，你可以通过一些自定义的方法来实现这个功能。以下是一个可能的解决方案：

1. 不使用 show-overflow-tooltip：首先，你可以不使用 show-overflow-tooltip，而是自己实现一个缩略和展开的功能。
2. 添加自定义的展开/折叠按钮：在每个需要此功能的单元格旁边，添加一个展开/折叠的按钮。
3. 使用 CSS 控制显示：通过 CSS 控制单元格内容的显示，当折叠时，使用 text-overflow: ellipsis; 和 overflow: hidden; 来实现缩略效果；当展开时，移除这些样式以显示完整内容。
4. 使用 Vue 的数据绑定和事件处理：使用 Vue 的数据绑定来跟踪每个单元格的展开/折叠状态，并使用事件处理来响应用户的点击操作。

下面是一个简化的示例代码：

<template>  
  <el-table :data="tableData">  
    <el-table-column prop="name" label="Name">  
      <template slot-scope="scope">  
        <div class="cell-content" :class="{ expanded: scope.row.expanded }">  
          {{ scope.row.name }}  
        </div>  
        <el-button @click="toggleExpand(scope.row)">  
          {{ scope.row.expanded ? '折叠' : '展开' }}  
        </el-button>  
      </template>  
    </el-table-column>  
    <!-- 其他列 -->  
  </el-table>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: [  
        { name: 'Long content that needs to be expanded...', expanded: false },  
        // 其他数据  
      ]  
    };  
  },  
  methods: {  
    toggleExpand(row) {  
      row.expanded = !row.expanded;  
    }  
  }  
};  
</script>  
  
<style scoped>  
.cell-content {  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
  max-width: 100px; /* 根据需要设置 */  
}  
  
.cell-content.expanded {  
  overflow: visible;  
  text-overflow: inherit;  
  white-space: normal;  
  max-width: none; /* 或者根据需要设置 */  
}  
</style>

这个示例中，我们为每个数据行添加了一个 expanded 属性来跟踪其展开/折叠状态。当点击按钮时，我们切换这个属性的值，并使用 CSS 来控制单元格内容的显示。