FastAdmin 如何正确使用表格组件的formatter属性

syant

但是我们在使用过程中经常遇到一个问题，比如status字段，我们数据库存的是0和1，或者normal,hidden等，使用Table.api.formatter.status 渲染时，如何将字段值转为中文？如何设置使用的颜色？

其实karson为我们提供了一些属性可以配置，只不过官方文档中并没有说明有哪些属性可以配置，导致一些新人不知所措。

我写这个帖子的目的就是帮助大家解除这个疑惑。

俗话说授之以鱼不如授之以渔。

本帖并不打算直接将可配置的属性列举出来，而是教大家如何通过源码去找到自己想要的属性配置。

首先，你要知道封装formatter的代码在 public/assets/js/require-table.js 大约372行的位置：

以status为例，假设现在有个表格，status字段的值为0和1，分别代表“启用”和“禁用”。

现在我需要做两件事：

• 将0和1分别显示为“禁用”和“启用”
• 启用使用绿色图标，禁用使用红色图标
  

为了知道该如何配置，我查看了源码：

请看上图源码中，红框中的代码，你会发现颜色是使用custom属性来配置的，并且该属性默认是{normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'}

而我的status字段值是0或者1，因此我们需要配置custom属性为：custom: {0: 'success', 1: 'error'}

那么文字怎么转换为中文呢？可以看到Table.api.formatter.status其实最后调用了Table.api.formatter.normal，于是我们再查看normal的代码：

注意看上图红框中的代码，你会发现原来文字显示是可以通过searchList属性来配置的。

所以我们需要配置searchList属性为：searchList: {1: '启用', 0: '禁用'}

最终代码为：

1. {
   
2.    field: 'status',
   
3.    title: __('status'),
   
4.    operate: false,
   
5.    formatter: Table.api.formatter.status,
   
6.    custom: {0: 'success', 1: 'error'},
   
7.    searchList: {0: '启用', 1: '禁用'}
   
8. }

复制代码