如何在KeystoneJS v6中将两个schema字段拼接为Select字段显示标签

当前前端显示效果：

KeystoneJS v6 有两种常用方案可以实现Select字段显示拼接的完整姓名：

方案1：新增虚拟字段（可复用性高，推荐） #

如果后续业务中还有其他场景需要用到完整姓名，可新增virtual字段作为标签字段，代码如下：

import { list } from '@keystone-next/keystone/schema';
import { text, virtual } from '@keystone-next/fields';
import { graphql } from '@keystone-next/keystone';

export const Participant = list({
  ui: {
    labelField: 'fullName',
  },
  fields: {
    firstName: text({ isRequired: true }),
    lastName: text({ isRequired: true }),
    fullName: virtual({
      field: graphql.field({
        type: graphql.String,
        resolve(item) {
          return `${item.firstName} ${item.lastName}`;
        },
      }),
    }),
  },
});

方案2：使用labelResolver配置（轻量无额外字段） #

如果仅需要在Admin UI的标签、选择器中显示拼接姓名，无需复用该字段，直接配置ui.labelResolver即可，代码如下：

import { list } from '@keystone-next/keystone/schema';
import { text } from '@keystone-next/fields';

export const Participant = list({
  ui: {
    labelResolver: (item) => `${item.firstName} ${item.lastName}`,
  },
  fields: {
    firstName: text({ isRequired: true }),
    lastName: text({ isRequired: true }),
  },
});

注意你原有代码中lastName字段后存在多余的}),语法错误，使用上述代码时注意修正即可。

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