在vue的render函数中如何循环渲染数据

• 业务场景描述

在table组件的columns数组中（以ivewui为例），自定义表格列数据，根据params.row.xxx，循环遍历数组，渲染数据。

• 示例

 

name: [
   {id:001, num:333},
   {id:002, num:433}
],

 

期望的效果：将name中的id和num显示到单元格中，如下

 

• 实现方式

遍历数组name，将name中每一项的属性值添加到数组中，最后返回这个数组即可。

render: (h, params) => {
  const nameList = params.row.name;
  let group = [];
  for (let i = 0; i < nameList.length; i++) {
    group.push(h('div', [
      h('span', nameList[i].id),
      h('span', ` * `),
      h('span', nameList[i].num)
    ]));
  }
  return h('div', group)
}