Formatter ElementUI

开头简述解决方案

在使用ElementUI进行前端开发时，我们常常需要对表格（Table）中的数据显示格式进行自定义，以满足不同的业务需求。ElementUI本身提供了formatter属性，能够直接应用于el-table-column组件中，用于定义列内容的显示规则。这为我们提供了一种便捷的方式，可以快速实现数据格式化的需求，比如将时间戳转换为可读日期、数字格式化、状态码转义等。

使用`formatter`属性

基础用法

最简单的使用方法是在定义表格列时直接设置formatter属性，它接受一个函数作为参数，该函数接收四个参数：row（行数据）、column（列配置）、cellValue（单元格值）和index（行索引）。通过这个函数，我们可以根据实际需求返回想要显示的内容。

html

  
    
      <!-- 使用formatter属性 -->
      
        {{ formatDate(scope.row.date) }}
      
    
    
    
  
</p>


export default {
  data() {
    return {
      tableData: [
        {
          date: 1672531200000, // 时间戳
          name: "王小虎",
          address: "上海市普陀区江路 1518 弄"
        },
        // 其他数据...
      ]
    };
  },
  methods: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
    }
  }
};


<p>

上述代码片段展示了如何将时间戳格式化为YYYY-MM-DD的字符串形式展示在表格中。这里我们并没有直接使用formatter属性，而是选择了slot-scope插槽方式来实现相同的功能，这是因为有时候我们需要更复杂的逻辑处理或者样式控制，这种方式更为灵活。

如果只是简单的格式化操作，可以直接使用formatter属性：

html
<el-table-column
  prop="date"
  label="日期"
  width="180"
  :formatter="formatDate"</p>

<blockquote>
  <p>

复杂逻辑下的`formatter`

当面对更复杂的数据处理逻辑时，例如根据状态码显示对应的文字描述，我们可以这样写：

html <el-table-column prop="status" label="状态" :formatter="formatStatus"></el-table-column>

javascript methods: { formatStatus(row, column, cellValue) { const statusMap = { 0: "待审核", 1: "已通过", 2: "未通过" }; return statusMap[cellValue] || "未知"; } }

这段代码实现了根据status字段的不同值显示相应的文字说明，其中statusMap对象映射了不同状态码与描述之间的关系。

其他思路

除了使用formatter属性外，还有其他几种思路可以实现类似的效果。

使用计算属性

对于某些场景，如果格式化的逻辑不仅限于单个表格列，还涉及到多个地方使用相同的规则，那么可以考虑将格式化逻辑提取到计算属性中，然后在模板中引用这些计算属性。

javascript computed: { formattedTableData() { return this.tableData.map(item => ({ ...item, formattedDate: this.formatDate(item.date), formattedStatus: this.formatStatus(item.status) })); } }

之后，在表格组件中就可以直接使用已经格式化好的数据了。