如何获取Formio.js中Select组件变更前后的值（含DataGrid场景）

架构老林

2026-6-22

解决Formio.js DataGrid中Select组件获取变更前后值的问题

核心思路

借助Formio的组件生命周期事件，结合动态组件的唯一标识，精准捕获每个下拉框（包括DataGrid新增行生成的下拉框）的变更前、后值。

实现方案

方案一：利用表单全局事件监听

// 初始化表单实例
const form = new Formio(document.getElementById('formio'));
// 用Map存储每个下拉框的旧值，以组件唯一instanceId为键
const oldValueMap = new Map();

form.ready.then(() => {
  // 监听值变更前事件，记录旧值
  form.on('beforeChange', (component, newValue, oldValue) => {
    if (component.key === 'testDropDown') {
      oldValueMap.set(component.instanceId, oldValue);
    }
  });

  // 监听值变更完成事件，获取当前值与旧值
  form.on('change', (component, newValue) => {
    if (component.key === 'testDropDown') {
      const prevValue = oldValueMap.get(component.instanceId);
      console.log(`当前值: ${newValue}, 变更前值: ${prevValue}`);
      // 此处添加你的业务逻辑
    }
  });
});

方案二：给Select组件添加自定义变更事件

直接修改表单配置中的Select组件，添加自定义变更处理函数：

// 修改后的Select组件配置片段
{
  label     : 'Test drop down',
  widget    : 'choicesjs',
  tableView : true,
  data: {
    values: [
      { label: 'Test 1', value: 'test1' },
      { label: 'Test 2', value: 'test2' },
      { label: 'Test 3', value: 'test3' }
    ]
  },
  key       : 'testDropDown',
  type      : 'select',
  input     : true,
  // 自定义变更事件，自动传入当前值与旧值
  customOnChange: function(currentValue, previousValue) {
    console.log(`当前值: ${currentValue}, 变更前值: ${previousValue}`);
    // 业务逻辑写在这里
  }
}