如何在表单stepper进度条中按状态条件在中间位置新增步骤

核心思路 #

先初始化固定的基础步骤配置，再根据当前用户状态判断是否在指定位置插入新增的emp-employment-history步骤，无需维护多套重复的步骤配置。

调整后可直接复用的代码 #

你原有代码遗漏了verify步骤的定义，这里同步补上：

stepper(){
  // 定义原有4个固定步骤
  const item1 = new Item("","");
  item1.name = "Emp details";

  const item2 = new Item("","");
  item2.name = "Emp address";

  const item3 = new Item("","");
  item3.name = "Emp contact";

  const item4 = new Item("","");
  item4.name = "Verify";

  // 先初始化前2个全场景都要显示的步骤
  let stepList = [item1, item2];

  // 此处替换成你自己的状态判断逻辑，满足employee状态时插入新增步骤
  const isEmployee = 你获取到的状态值 === 'employee';
  if (isEmployee) {
    const empHistoryItem = new Item("","");
    empHistoryItem.name = "Emp employment history";
    stepList.push(empHistoryItem);
  }

  // 追加剩余的原有固定步骤
  stepList.push(item3, item4);

  // 初始化stepper实例
  this.stepper = new Stepper(
    1,
    0,
    stepList,
    false
  );
}

配套适配注意事项 #

• 如果步骤配置了唯一key、路由路径、跳转标识，记得给新增的就业历史步骤补充对应配置，避免跳转逻辑异常
• 如果有步骤完成度校验逻辑，需要同步补充新增步骤的校验规则，非employee状态下要跳过该步骤的校验
• 如果当前激活步骤是由后端返回值控制的，要注意索引偏移适配：非employee状态下第3步是contact，employee状态下第3步是就业历史、第4步才是contact，需要根据状态调整索引匹配规则

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