今天遇到了一个需求，表格展示数据时，有一列是数组，要求数组中的每一项在单元格内独占一行，就是要换行。使用的是vue2+element。代码示例如下
<template><div><el-table :data="tableData" border style="width: 500px" highlight-current-row><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="hobbies" label="爱好" align="center"><template slot-scope="scope"><span v-html="formatArray(scope.row.hobbies)"></span></template></el-table-column></el-table></div></template><script>export default {data() {return {tableData: [{ name: '张三', hobbies: ['吃饭', '睡觉', '打豆豆'] },{ name: '李四', hobbies: ['吃饭', '睡觉', '打代码'] },],};},methods: {formatArray(arr) {return arr.map((item) => {return item + '<br>';}).join('');},},};</script>
最终效果如下
代码中使用了 el-table-column 组件来定义表格列，其中 formatter 函数将数组 hobbies中的每个元素都加上 <br> 标签，以换行的方式展示到表格中。使用插槽 slot-scope 来获取表格行数据 row，并调用 formatArray 方法来渲染数组内容。
需要注意的是，在使用 formatter 函数时，不能直接返回包含 HTML 标签的字符串，而是应该使用 v-html 指令来渲染 HTML 内容，否则会存在 XSS 安全漏洞的风险。
如果说数据是字符串，需要遇到某个特殊符号时换行，也是一样的思想。例如遇到 封号； 换行，实例如下：
<template><el-table :data="tableData2" border style="width: 500px" highlight-current-row><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="hobbies" label="爱好" align="center"><template slot-scope="scope"><span v-html="formatStr(scope.row.hobbies)"></span></template></el-table-column></el-table></template><script>data() {return {tableData2: [{ name: '张三', hobbies: '吃饭2；睡觉2；打豆豆2' },{ name: '李四', hobbies: '吃饭2；睡觉2；打代码2'},],};methods:{formatStr(str) {if(str.includes('；')){return str.split('；').join('<br>')}else{return str}}}</script>
最终效果如下
注意分割符是中文的还是英文的，方法中的符号一定要和数据中匹配才行
