vue el-table-column 动态分行

### 动态分行显示的实现方法

为了实现在 `el-table-column` 中动态分行显示内容，在 Vue 组件内可以通过自定义模板的方式处理。具体来说，可以在 `<template>` 标签中利用作用域插槽（slot-scope），根据特定条件或逻辑分割字符串或其他形式的数据源，进而构建多行展示效果。

对于需要分行显示的情况，假设每一行记录有一个字段包含了多个值组成的数组或者是逗号分隔的字符串，那么可以先解析这个字段再将其转换成适合 HTML 渲染的形式：

<el-table :data="tableData">
  <!-- 假设 'details' 字段是一个由逗号分隔的字符串 -->
  <el-table-column label="详情" width="200px">
    <template slot-scope="scope">
      <div>
        {{ scope.row.details.split(',').join('<br>') | safeHtml }}
      </div>
    </template>
  </el-table-column>
</el-table>

需要注意的是，上述例子中的 `split()` 方法用于将原始字符串按照指定字符拆分成数组；而 `join('<br>')` 则是把这些片段重新组合起来，并且每项之间插入换行符 (`<br>`) 来达到视觉上的分行目的[^1]。

由于直接在模板里拼接HTML可能带来XSS攻击风险，因此建议使用过滤器或者计算属性来安全地处理这些特殊标记。这里简单展示了通过自定义过滤器 `safeHtml` 处理潜在的安全隐患的方法之一:

// 定义全局过滤器
Vue.filter('safeHtml', function (value) {
  if (!value) return '';
  
  let div = document.createElement('div');
  div.innerText = value;
  return div.innerHTML;
});

另外一种更推荐的做法是在 JavaScript 层面完成数据预处理工作，比如提前准备好带有适当格式化的文本列表作为新属性附加给每一行的对象实例上，然后再传递给视图层进行渲染。这样做不仅提高了性能也增强了安全性[^3]。

最后值得注意的一点是，当涉及到复杂的业务场景时，考虑采用 Vuex 或者其他状态管理模式管理复杂的状态变化可能会更加合理有效[^5]。