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

admin

fastadmin前端表格组件使用的是bootstrap-table，如果我们想要自定义表格的内容，可以使用formatter属性。最常规的用法如下：

1. columns: [
   
2.     [
   
3.                        
   
4.         {
   
5.            field: 'type', title: __('type'),
   
6.            formatter: function (value,row) {
   
7.               if (value === 0) return '普通存储';
   
8.               if (value === 1) return '低频存储';
   
9.            }
   
10.         },
    
11.         {
    
12.            field: 'url', title: __('url'),
    
13.            formatter: function (value,row) {
    
14.               return '<a href="' + value + '">' + row.name + '</a>';
    
15.            }
    
16.         }
    
17.     ]
    
18. ]

复制代码

1. > `Table.api.formatter.icon` 快速将字段渲染成一个按钮，仅支持Fontawesome按钮
   
2. > `Table.api.formatter.image` 快速将字段渲染成图片展示的形式
   
3. > `Table.api.formatter.images` 快速将字段渲染成多图片展示的形式,字段数据请以`,`进行分隔
   
4. > `Table.api.formatter.status` 快速将字段渲染成状态，默认`normal/hidden/deleted/locked`这四个状态
   
5. > `Table.api.formatter.url` 快速将字段渲染成URL框
   
6. > `Table.api.formatter.search` 快速将字段渲染成可搜索的链接，点击后将执行搜索
   
7. > `Table.api.formatter.addtabs` 快速将字段渲染成可添加到选项卡的链接，点击后将把链接添加到选项卡
   
8. > `Table.api.formatter.flag` 快速将字段渲染成标志，仅支持`index/hot/recommend/new`这四种标志
   
9. > `Table.api.formatter.label` 快速将字段渲染Label标签
   
10. > `Table.api.formatter.datetime` 快速时间戳数据渲染成日期时间数据
    
11. > `Table.api.formatter.operate` 操作栏固定按钮
    
12. > `Table.api.formatter.buttons` 快速生成多个按钮
    
13. > `Table.api.formatter.toggle` 快速生成切换按钮

复制代码

使用方法为：

1. field: 'status', title: __('status'), formatter: Table.api.formatter.status

复制代码

以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. }

复制代码

效果为：

这里是以status为例，其他的formatter也是一样的，大家阅读一下源码就知道该怎么用了。

版权说明：
本文转载自https://www.cnblogs.com/libras/p/17411608.html