Tabulator中autocomplete选中后如何联动更新另一单元格值

首先提前存储从后端拉取的键值映射：

// 可直接替换为接口请求返回的键值对数据
const kvMap = {
  'JohnSmith': 'Name is john smith',
  'AndrewSmith': 'Name is andrew smith'
}

按如下配置表格即可实现需求：

// 初始化表格
const table = new Tabulator("#your-table-id", {
  // 其他全局配置（高度、分页、初始数据等）自行补充
  columns: [
    {
      title: "选择名称",
      field: "column1",
      editor: "autocomplete",
      editorParams: {
        // 下拉选项取映射的所有键，默认支持模糊匹配，输入smith即可筛选出两个目标选项
        values: Object.keys(kvMap),
        freetext: false // 不允许输入不在选项范围内的值，可按需调整为true
      },
      // 单元格编辑完成后触发，直接更新同行第二列值
      cellEdited: (cell) => {
        const selectVal = cell.getValue()
        cell.getRow().update({
          column2: kvMap[selectVal] ?? ""
        })
      }
    },
    {
      title: "名称说明",
      field: "column2",
      editable: false // 不需要手动编辑可设为只读
    }
  ]
})

异常排查 #

• 若cellEdited不触发：检查Tabulator版本，4.0以上版本均支持该事件，如果你自定义了editor组件需确保调用了success回调提交编辑值
• 若筛选不生效：确认没有在editorParams中自定义filterFunc覆盖默认匹配逻辑，默认匹配规则为全字符模糊匹配，完全覆盖你的输入筛选需求
• 若键值对为异步拉取：需等接口请求完成拿到kvMap后再初始化表格，不要在表格初始化后再修改editorParams的values，避免选项不更新

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