Vue+iView中render返回字符串失效，原可行写法如何恢复？

为什么直接返回数字的写法失效了？ #

这本质是Vue render函数的规范要求和iView组件版本更新共同导致的：

• Vue官方明确规定，render函数必须返回VNode实例（也就是通过h函数创建的虚拟节点）或者null，直接返回字符串、数字这类原始值其实是不符合规范的。
• 早期版本的iView表格组件可能做了额外兼容：如果你的render函数返回了原始值，组件内部会自动帮你把它包装成文本VNode，所以之前能正常工作。但后续iView的版本更新中，可能移除了这个非标准的兼容逻辑，严格遵循Vue的render规范，导致直接返回数字的写法不再生效。

如何让简洁写法重新可用？ #

你可以封装一个通用的render包装函数，自动帮你把原始值转换成合法的VNode，这样就能继续用简洁的写法了：

// 封装一个处理文本渲染的工具函数
const textRender = (renderFn) => (h, params) => {
  const content = renderFn(h, params);
  // 如果返回的是字符串、数字、布尔值，自动包装成span文本节点
  if (['string', 'number', 'boolean'].includes(typeof content)) {
    return h('span', String(content));
  }
  // 如果返回的已经是VNode或者null，直接返回
  return content;
};

然后在表格列配置中这样使用：

{ 
  title: 'title1', 
  key: 'order', 
  // 用textRender包裹你的简洁逻辑
  render: textRender((h, params) => params.index + 1) 
}

额外说明 #

如果你不想额外嵌套span标签，也可以直接创建纯文本VNode（Vue 2中可以用h(null, String(params.index + 1))），但部分UI组件可能要求列内容必须是元素节点，所以用span包裹的兼容性更好。

内容的提问来源于stack exchange，提问作者Yeachan