如何用Bootstrap-Table实现单元格下拉框默认匹配表格数据

核心错误分析 #

你在设置下拉框默认选中项时，错误地使用了row[index]来获取目标值，但index是当前行的数字索引，row[index]并不对应你需要的字段值。实际上Bootstrap-Table的格式化器函数第一个参数value，就是当前单元格对应字段（UF_CRM_1678511065）的实际值，直接用这个值匹配option的value即可。另外callResults变量未声明为局部变量，可能造成全局污染，建议补充声明。

修正后的格式化器代码 #

function callResultFormatter(value, row, index) {
  // 声明为局部变量，避免全局作用域污染
  const callResults = {
    "79": "Sale Made",
    "335": "Rep will call back",
    "81": "Upsold Device",
    "83": "Outbound Call Needed",
    "337": "Not Interested/Bad Call",
    "739": "Support Call",
    "773": "Dropped Call",
    "775": "RMA",
    "777": "Other"
  };

  const select = document.createElement("select");
  select.className = "form-control";

  for (const [key, text] of Object.entries(callResults)) {
    const option = document.createElement("option");
    option.value = key;
    option.text = text;
    // 循环时直接判断匹配，设置选中状态，更高效
    if (key === String(value)) {
      option.selected = true;
    }
    select.appendChild(option);
  }

  return select.outerHTML;
}

额外说明 #

• 无需额外通过querySelector查找option，在循环创建option时直接判断匹配，代码更简洁高效。
• 注意将value转为字符串（String(value)），避免API返回数字类型导致匹配失败。
• outerHTML会保留option的selected属性，只要设置正确，渲染后的下拉框会显示正确的默认选中值。

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