FastAdmin 如何正确使用表格组件的formatter属性
fastadmin前端表格组件使用的是bootstrap-table，如果我们想要自定义表格的内容，可以使用formatter属性。最常规的用法如下：columns: [
[
{
field: 'type', title: __('type'),
formatter: function (value,row) {
if (value === 0) return '普通存储';
if (value === 1) return '低频存储';
}
},
{
field: 'url', title: __('url'),
formatter: function (value,row) {
return '<a href="' + value + '">' + row.name + '</a>';
}
}
]
]
> `Table.api.formatter.icon` 快速将字段渲染成一个按钮，仅支持Fontawesome按钮
> `Table.api.formatter.image` 快速将字段渲染成图片展示的形式
> `Table.api.formatter.images` 快速将字段渲染成多图片展示的形式,字段数据请以`,`进行分隔
> `Table.api.formatter.status` 快速将字段渲染成状态，默认`normal/hidden/deleted/locked`这四个状态
> `Table.api.formatter.url` 快速将字段渲染成URL框
> `Table.api.formatter.search` 快速将字段渲染成可搜索的链接，点击后将执行搜索
> `Table.api.formatter.addtabs` 快速将字段渲染成可添加到选项卡的链接，点击后将把链接添加到选项卡
> `Table.api.formatter.flag` 快速将字段渲染成标志，仅支持`index/hot/recommend/new`这四种标志
> `Table.api.formatter.label` 快速将字段渲染Label标签
> `Table.api.formatter.datetime` 快速时间戳数据渲染成日期时间数据
> `Table.api.formatter.operate` 操作栏固定按钮
> `Table.api.formatter.buttons` 快速生成多个按钮
> `Table.api.formatter.toggle` 快速生成切换按钮使用方法为：
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: '禁用'}
最终代码为：
{
field: 'status',
title: __('status'),
operate: false,
formatter: Table.api.formatter.status,
custom: {0: 'success', 1: 'error'},
searchList: {0: '启用', 1: '禁用'}
}效果为：
这里是以status为例，其他的formatter也是一样的，大家阅读一下源码就知道该怎么用了。
版权说明：
本文转载自https://www.cnblogs.com/libras/p/17411608.html
页:
[1]