el-table的formatter格式化数据

### 使用 `el-table` 的 `formatter` 属性进行数据格式化

在 Element UI 中，`el-table-column` 组件提供了 `formatter` 属性用于自定义表格列的数据展示方式。通过此属性可以实现复杂的逻辑处理并返回最终显示的内容。

#### 基本用法

对于简单的字符串截取操作：

// 定义方法，在 methods 或者 computed 中均可
stateFormat(row, column, cellValue, index, maxLength) {
    if (!cellValue) return "";
    if (cellValue.length > maxLength) {
        return `${cellValue.slice(0, maxLength)}...`;
    }
    return cellValue;
}

在模板中调用该函数作为 `formatter` 参数传递给 `<el-table-column>`:

<template>
  <el-table :data="tableData">
    <!-- ...其他配置 -->
    <el-table-column prop="title" label="标题" :formatter="(row, column, cellValue, index) => stateFormat(row, column, cellValue, index, 20)">
    </el-table-column>
    <!-- ...其他配置 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据...
      ]
    };
  },
  methods: {
    stateFormat(row, column, cellValue, index, maxLength) {
      if (!cellValue) return '';
      if (cellValue.length > maxLength) {
          return `${cellValue.slice(0, maxLength)}...`;
      }
      return cellValue;
    }
  }
};
</script>

#### 处理复杂情况下的 HTML 输出

当需要输出带有样式或其他标签的HTML内容时，需要注意浏览器的安全机制会自动转义任何尝试注入到DOM中的潜在危险字符。因此直接返回HTML字符串通常不会按预期工作[^1]。

为了安全地渲染富文本或嵌入式组件，建议采用如下策略之一：

- **使用 scoped slot**

利用具名插槽（named slots），可以在每一行内编写更灵活的布局结构而不受限于纯文本形式的结果。

  <el-table-column label="状态">
    <template v-slot="{ row }">
      <span style="color:red;" v-if="row.status === 'error'">错误</span>
      <span v-else>{{ row.status }}</span>
    </template>
  </el-table-column>

- **借助第三方库转换Markdown/HTML**

如果确实有必要呈现完整的HTML片段，则可考虑引入像marked这样的工具先将目标串转化为合法节点再插入页面；不过这种方式需谨慎评估其安全性风险[^2]。