表格中 mapping 映射不生效

未匹配的标注

mapping组件不生效

最近我在开发过程中有个交互是点击展开抽屉,抽屉内用表格显示一些数据,表格中某一列需要使用mapping 映射显示更友好的值。结果怎么都加载不出来,就很头大。

  • 问题原因:返回数据变量不是object格式数据,或者说表达式使用有限制。
    • 解决方法 需要将数据配置从 map(变量) 改为 source(变量)

成功代码如下:

    protected function confirmOrder()
    {
        //创建点击弹出抽屉的按钮。
        return amisMake()->DrawerAction()->label('准备工作')->level('link')->align('left')->drawer(
           //按钮触发的抽屉
            Drawer::make()->position('left')->title('需要确认以下内容')
                ->closeOnOutside()->closeOnEsc()->body([
                    //抽屉的内容,因为table不能加载数据,所以使用service组件包裹以下
                    amisMake()->Service()->api('confirmOrder?id=${id}')//请求地址,返回数据格式见下文
                        ->body([
                            amisMake()->Table()->title('物料信息')->affixHeader()
                                ->source('$sppgoods')
                                ->columns([
                                        amisMake()->TableColumn('goods_id', '物料')->type('mapping')
                                            ->valueField('id')->labelField('name')//设置这个之后,labelfield 配置后,这个值在 itemSchema 中就不生效了,不过目前测试可以显示,不知道怎么回事
                                            ->itemSchema(['type' => 'tag', 'label' => '${id} ${name}'])
                                            ->source('${goods}'),
//                                    ),
                                        TableColumn::make()->name('num')->label('数量'),
                                    ]
                                ),
                            amisMake()->Table()->title('人员信息')
                                ->source('${spus}')
                                ->columns(...),
                            amisMake()->Table()->data(['items'=>'${demodata}'])
                                ->columns([['name' => 'id', 'label' => 'Id',],
                                    amisMake()->Mapping()->name('type')->label('映射')
                                        ->map([
                                            '1' => '<span class=\'label label-info\'>漂亮</span>',
                                            '2' => '<span class=\'label label-success\'>开心</span>',
                                            '3' => '<span class=\'label label-danger\'>惊吓</span>',
                                            '4' => '<span class=\'label label-warning\'>紧张</span>',
                                            '*' => '其他:${type}',
                                        ]),
                                ])
                        ]),
                ]
            )
        );

service 接口返回数据

{
    "data": {
        "sppgoods": [
            {
                "goods_id": 1,
                "num": 3
            },
            {
                "goods_id": 2,
                "num": 1
            },
            {
                "goods_id": 3,
                "num": 10
            }
        ],
        "goods": [
            {
                "id": 1,
                "name": "服装",
                "code": "fz888555"
            },
            {
                "id": 2,
                "name": "礼物",
                "code": "m111"
            },
            {
                "id": 3,
                "name": "拼图",
                "code": "pt0001"
            }
        ],
        "demodata": [
            {
                "type": 1,
                "id": "1"
            },
            {
                "type": "2",
                "id": 2
            },
            {
                "type": 3,
                "id": 3
            }
        ]
    }
}

欢迎大家的补充和指正,谢谢

官方资源

owl admin 文档
demo地址
amis所有组件示例

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~