如何从SlimGrid（SlickGrid for Vue）中的嵌套数据构建列？

Question

我有这样的数据结构：

{ 
  year: 1999,
  make: "ford",
  model: {
    name: "escort",
    type: {
      name: "wagon",
      id: 2
    }
}

我想展示所有的第一级属性（年份，制作）以及嵌套属性（model.name，model.type.name）。

在SlimGrid中，您的列定义如下所示：

columnOptions: {
  'year': {
    name: 'Car Year',
    order: 0,
    formatter (row,cell,value){
      return new Date(year);
    }
  }
}

model.name适用于以下选项：

'model': {
    name: 'Model Name',
    order: 2,
    formatter (row,cell,value){
      return value.name;
    }
  }

因为model是顶级属性。

但是当我尝试构建一个没有直接顶级等效的新列时，该列不会出现：

'': {
  name: 'Type of Car',
  order: 3,
  formatter (row,cell,value){
    return this.tableData[row].model.type.name;
  }
}

是）我有的：

Car Year |  Make | Car Model
---------+-------+----------
    1999 |  ford |  escort

我想要的是：

Car Year |  Make | Car Model | Type of Car
---------+-------+-----------+------------
    1999 |  ford |   escort  |    wagon

如何在SlimGrid / SlickGrid中创建一个没有连接到顶级属性的额外列？

Answer 1

不知道SlimGrid，但我可以回答SlickGrid，至少对于https://github.com/6pac/SlickGrid目前的回购。

您只使用格式化程序调用的前几个参数。整个签名是：

 formatter(rowIndex, cellIndex, value, columnObject, rowObject, grid)

columnObject是上面的columnOptions。 rowObject是当前行对象 - 您使用this.tableData[row]引用的对象。

它使用的this.tableData[row]无法与SlickGrid一起使用（改为使用rowObject），但它又取决于你正在使用的repo。您可以通过在slick.grid.js文件中搜索result = getFormatter(row, m)(row, cell, value来查看格式化程序调用签名的内容。