el-table中单元格数据换行

项目场景：

实现el-table单元格内数据换行显示。

---

解决方案：

首先需要将数据换行，其次css处理：

<el-table-column prop="langList" header-align="center" align="center" label="用户语种">
     <template slot-scope="scope">
          {{ splitStr(scope.row.langList) }}
     </template>
</el-table-column>

<script>
 splitStr(str) {
    // str = "['en','ar']"
    let list = str.replace(/\[|]/g, '').split(',')
    return list.join('\n\r').replace(/["']/g, "") // 以换行符的形式分割
 }
</script>

<style scoped lang="scss">
::v-deep(.el-table .cell) {
    white-space: pre-line; 
}
</style>

效果展示：

注意：

最后添加的css效果会导致给el-table添加show-overflow-tooltip属性时失效，因为溢出隐藏的原理会使用到white-space属性

单行文本溢出隐藏

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文本溢出隐藏

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数