今天遇到了一个需求,表格展示数据时,有一列是数组,要求数组中的每一项在单元格内独占一行,就是要换行。使用的是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>
最终效果如下
注意分割符是中文的还是英文的,方法中的符号一定要和数据中匹配才行