实现表格内容过长被隐藏的效果，el-table-column + show-overflow-tooltip

后端返回的是一整串长数据

abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc

需要实现的是利用show-overflow-tooltip实现遇到换行符'\n'就换行

实现的效果：

abcabcabcabcabcabcabc
-------------------------------
abcabcabcabcabcabcabc
-------------------------------
abcabcabcabcabcabcabc
-------------------------------

我只知道怎么设置超出展示的宽度，不知道怎么实现这种效果，球助各位兄弟🙏

参考GPT和自己的思路：可以通过自定义slot来实现该需求。可以在el-table-column内部定义一个slot，然后通过props.columnIndex获取当前列的索引，再根据索引来获取该行数据的对应值，然后进行字符串替换，将"\n"替换为"
"以实现换行的效果。具体代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="content" label="内容">
      <template slot-scope="{row}">
        <div v-html="showContent(row.content)"></div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { content: 'abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc' }
      ]
    }
  },
  methods: {
    showContent(content) {
      return content.replace(/\n/g, '<br>')
    }
  }
}
</script>

需要将el-table-column的show-overflow-tooltip属性去掉，因为当使用自定义slot时，show-overflow-tooltip属性不起作用。

参考GPT和自己的思路：你好，针对你的问题，可以使用el-table-column的formatter属性来进行处理。具体实现步骤如下：

在el-table-column中设置show-overflow-tooltip属性为true。
在el-table-column中设置formatter属性，该函数接收两个参数：row（当前行的数据对象）和column（当前列的列对象）。
在formatter函数中，对传入的数据row[column.property]进行处理，利用replace方法将换行符'\n'替换为'
'。
返回处理后的字符串即可。

具体代码实现如下：

<el-table :data="tableData">
  <el-table-column prop="longText" label="长文本" show-overflow-tooltip>
    <template slot-scope="{row}">
      {{ formatLongText(row.longText) }}
    </template>
  </el-table-column>
</el-table>

...
methods: {
  formatLongText(text) {
    return text.replace(/\n/g, '<br/>');
  }
}
...

这样就可以实现遇到换行符'\n'就换行的效果了。希望能够对你有所帮助。

可以用el-tooltip来替换实现 http://t.csdn.cn/NqSun

关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：Element el-table组件的show-overflow-tooltip的实现原理
除此之外, 这篇博客: vue中el-table插槽内容使用show-overflow-tooltip属性无法显示省略号问题-附解决方法中的 文章目录 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
以下回答由chatgpt基于相关博客总结生成:
解决方案: 经过分析，问题是因为使用了插槽slot-scope，在列下面嵌套了元素，导致该show-overflow-tooltip属性不会自动截断文字并展示省略号，所以需要在代码中手动实现该效果。
解决方案步骤： 1.给el-table-column添加formatter属性，格式化展示的列内容。 2.在formatter函数中对超出部分进行省略并添加'...(展开)'链接。 3.添加hover事件，使展开部分在鼠标悬浮时显示，离开时隐藏。 4.添加click事件，使展开部分可以在点击链接时展开全部内容。
代码如下：
<el-table-column prop="col2" label="列2" width="70" :formatter="formatCell"
{{ scope.row.col2 }}
// 格式化展示的列内容 formatCell(row, column, cellValue) { const maxLength = 10 // 需要限制的最大长度 if (cellValue.length > maxLength) { return <div>${cellValue.substring(0, maxLength)}<span class="ellipsis">...(展开)</span><span class="content-hover">${cellValue.substring(maxLength)}</span></div> } else { return <div>${cellValue}</div> } }, mounted() { // 鼠标悬浮事件 const table = this.$refs.table.$el.querySelector('.el-table__body-wrapper') table.addEventListener('mouseover', function (e) { const hoverContent = e.target.querySelector('.content-hover') if (hoverContent) { hoverContent.style.display = 'inline' } }) table.addEventListener('mouseout', function (e) { const hoverContent = e.target.querySelector('.content-hover') if (hoverContent) { hoverContent.style.display = 'none' } })
// 展开事件 table.addEventListener('click', function (e) { const ellipsis = e.target.querySelector('.ellipsis') if (ellipsis) { ellipsis.style.display = 'none' const hoverContent = e.target.nextElementSibling hoverContent.style.display = 'inline' } }) }
样式： .cell-content { position: relative; display: flex; justify-content: space-between; align-items: center; height: 30px; overflow: hidden; }
.ellipsis { position: relative; display: inline-block; margin-left: 5px; color: #409EFF; cursor: pointer; }
.content-hover { position: absolute; left: 0; top: 30px; display: none; background-color: #fff; padding: 8px; border: 1px solid #ddd; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); z-index: 10; max-width: 500px; word-break: break-all; }