formatter elementui

Formatter in ElementUI

ElementUI provides a formatter property in certain components like el-table-column to customize the display format of data. The formatter function allows modifying the raw data before rendering.

Basic Usage of Formatter

The formatter property accepts a function with three parameters: row, column, and cellValue. The function should return the formatted value.

<el-table-column
  prop="date"
  label="Date"
  :formatter="formatDate">
</el-table-column>

methods: {
  formatDate(row, column, cellValue) {
    return cellValue.toLocaleDateString();
  }
}

Formatting Numbers

For numeric data, the formatter can be used to add currency symbols, decimal places, or other numeric formatting.

formatCurrency(row, column, cellValue) {
  return '$' + cellValue.toFixed(2);
}

Conditional Formatting

The formatter function can include conditional logic to display different formats based on the data value.

formatStatus(row, column, cellValue) {
  return cellValue === 1 ? 'Active' : 'Inactive';
}

Date Formatting

When dealing with date fields, libraries like moment.js can be used within the formatter for more sophisticated date formatting.

formatDateTime(row, column, cellValue) {
  return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
}

Combining Multiple Fields

The formatter can combine values from multiple fields in the row data to create composite displays.

formatFullName(row, column, cellValue) {
  return `${row.firstName} ${row.lastName}`;
}

Performance Considerations

While formatters are powerful, complex formatting logic may impact performance in large tables. Consider pre-formatting data in the backend when possible.

Limitations

The formatter only affects display and doesn't modify the underlying data. For actual data transformation, use computed properties or methods before passing data to the table.