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

Question

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

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

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

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

实现的效果：

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

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

Answer 1

参考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属性不起作用。