如何在Ag-Grid的agSelectCellEditor下拉框中添加占位符？

要解决agSelectCellEditor默认选中第一个选项导致的用户困惑问题，你可以通过以下步骤添加下拉占位符：

1. 给选项列表插入占位符项 #

先在你的国家列表开头添加一个提示性的占位符条目（比如「请选择国家」），让下拉框默认选中这个占位符，而不是直接选中第一个国家：

// 初始化列表时先加入占位符
const countryNames = [['请选择国家']];
for(const [key, value] of countryCodes ) {
  if (key !== ' ') {
    countryNames.push([value.countriesCd]);
  }
}
// 转换为一维数组（agSelectCellEditor的values需要一维格式）
const selectValues = countryNames.map(item => item[0]);

2. 配置列参数 #

在列配置中，将处理后的一维数组传给cellEditorParams.values，同时添加cellRenderer来控制单元格显示（避免占位符文本直接显示在单元格中），并设置默认值为占位符：

const countryColumn = {
  field: 'country',
  cellEditor: 'agSelectCellEditor',
  singleClickEdit: true,
  // 设置默认值为占位符，确保初始状态下拉选中提示项
  defaultValue: '请选择国家',
  cellEditorParams: {
    values: selectValues
  },
  // 自定义单元格渲染：如果值是占位符则显示空，否则显示实际国家名
  cellRenderer: params => {
    return params.value === '请选择国家' ? '' : params.value;
  }
};

3. 可选：校验提交值（避免占位符被当作有效数据） #

如果需要确保表单提交时不会把占位符作为有效国家值，可以在数据提交前做校验：

// 提交前过滤占位符
const formData = {
  ...rowData,
  country: rowData.country === '请选择国家' ? '' : rowData.country
};

这样设置后，未选择国家时单元格显示为空，点击编辑时下拉框默认显示「请选择国家」的提示项，用户需要主动选择具体国家，解决了默认选中第一个选项的困惑。

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