使用Element的表格组件时如何控制单元格换行

今天遇到了一个需求,表格展示数据时,有一列是数组,要求数组中的每一项在单元格内独占一行,就是要换行。使用的是vue2+element。代码示例如下



最终效果如下

使用Element的表格组件时如何控制单元格换行_第1张图片

代码中使用了 el-table-column 组件来定义表格列,其中 formatter 函数将数组 hobbies中的每个元素都加上
标签,以换行的方式展示到表格中。使用插槽 slot-scope 来获取表格行数据 row,并调用 formatArray 方法来渲染数组内容。
需要注意的是,在使用 formatter 函数时,不能直接返回包含 HTML 标签的字符串,而是应该使用  v-html 指令来渲染 HTML 内容,否则会存在 XSS 安全漏洞的风险。

如果说数据是字符串,需要遇到某个特殊符号时换行,也是一样的思想。例如遇到 封号; 换行,实例如下:


最终效果如下

使用Element的表格组件时如何控制单元格换行_第2张图片

 注意分割符是中文的还是英文的,方法中的符号一定要和数据中匹配才行

你可能感兴趣的:(elementui,vue.js,前端,javascript,elementui)