vue3表格组件formatter

### Vue3 和 Element Plus 表格组件中的 `formatter` 属性 #### 什么是 `formatter` 属性？ 在 Element Plus 的表格组件中，`formatter` 是一个用于自定义单元格显示内容的函数属性。通过设置该属性，开发者可以根据特定逻辑动态调整表格列的内容展示方式[^1]。 #### 参数说明 `formatter` 接收四个参数： - **row**: 当前行的数据对象。 - **column**: 当前列的配置项。 - **cellValue**: 单元格的具体值。 - **index**: 数据列表中当前行的索引。 返回值为经过处理后的字符串或其他形式的内容，最终会渲染到对应的单元格位置。 #### 示例代码 以下是使用 `formatter` 属性的一个简单示例： ```vue <template> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180" :formatter="formatAge"></el-table-column> </el-table> </template> <script lang="ts"> import { defineComponent } from &#39;vue&#39;; export default defineComponent({ data() { return { tableData: [ { date: &#39;2023-09-01&#39;, name: &#39;张三&#39;, age: 25 }, { date: &#39;2023-09-02&#39;, name: &#39;李四&#39;, age: null } ] }; }, methods: { formatAge(row, column, cellValue) { if (cellValue === null || cellValue === undefined) { return &#39;未知&#39;; } else { return `${cellValue} 岁`; } } } }); </script> ``` 在这个例子中，当某一行的 `age` 字段为空时，`formatter` 函数将其替换为“未知”，从而实现更友好的用户体验。 #### 关于多表头和合并功能的支持 如果需要支持复杂的表头或多级表头结构，则可以通过额外的参数如 `multiHeader` 和 `merges` 来完成更加灵活的设计[^3]。不过这些参数并不直接影响 `formatter` 的行为，而是辅助构建整体布局的一部分。 ---