深圳全飞鸿
标题: FastAdmin 如何正确使用表格组件的formatter属性 [打印本页]
作者: syant 时间: 2025-4-13 16:40
标题: FastAdmin 如何正确使用表格组件的formatter属性
但是我们在使用过程中经常遇到一个问题，比如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: '禁用'}
最终代码为：
- {
- field: 'status',
- title: __('status'),
- operate: false,
- formatter: Table.api.formatter.status,
- custom: {0: 'success', 1: 'error'},
- searchList: {0: '启用', 1: '禁用'}
- }
| 欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) |
Powered by Discuz! X3.2 |
