You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Tabulator链接格式化器urlField无法解析嵌套字段问题求助

在使用Tabulator的link formatter处理JSON数据时遇到异常:当URL存储在数据的子对象中时,生成的<a>标签href属性为undefined,无法正确读取指定URL。

看起来formatterParams中的urlField并未使用默认的nestedSeperator(.)解析嵌套字段路径,这是否属于Bug?

数据示例

let data = [
    {
        "id": 2,
        "name": "PostgreSQL 14.x",
        "constructeur_id": 22,
        "domaine_id": 90,
        "show": "https://www.w3.org/Provider/Style/dummy.html",
        "domaine": {
            "id": 90,
            "name": "SGBD",
            "show": "https://www.w3.org/Provider/Style/dummy.html"
        },
        "constructeur": {
            "id": 22,
            "name": "POSTGRESQL",
            "show": "https://www.w3.org/Provider/Style/dummy.html"
        }
    }
]

Tabulator配置参数

table = new Tabulator("#table", {
    data:data,
    // 列定义
    columns: [
        {
            title: "Domaine",
            field: "name",
            formatter: "link",
            formatterParams: {
                labelField: "domaine.name",
                urlField: "domaine.show",  // 无法生效,返回undefined,怀疑未用默认分隔符解析路径
            },
        },
        {
            title: "Constructeur",
            field: "name",
            formatter: "link",
            formatterParams: {
                labelField: "constructeur.name",
                url: function (cell) {
                    return cell.getData().constructeur.show;
                }
            },
        },
        {
            title: "Nom du modèle",
            field: "name",
            formatter: "link",
            formatterParams: {
                labelField: "name",
                urlField: "show",
            },
        }
    ],
});

测试情况

  1. Domaine列:使用formatterParams的urlField属性,值为"domaine.show",本应读取domaine子对象的show属性,但实际返回undefined,无法生效;
  2. Constructeur列:使用formatterParams的url属性,传入手动获取URL的函数,可正常工作;
  3. Nom du modèle列:使用formatterParams的urlField属性,指向数据对象的直接属性,可正常工作;

额外验证:当数据对象中存在名为'domaine.show'的直接属性时,urlField可正常读取该值。

临时解决方案

  • 将urlField指向的属性移至主数据对象,而非子对象;
  • 使用url属性,通过自定义函数手动获取嵌套字段的URL值(示例:function (cell) { return cell.getData().constructeur.show;})

内容的提问来源于stack exchange,提问作者ElPepito

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.15 16:06:00