级联选择：按点击顺序回显

业务需求

使用级联选择器完成审批的流程，回显的顺序按照点击顺序展示，实现逐级审批的效果。

思路

我们使用el-cascader-panel的时候会发现最上面的数据总是会回显在最前面，这不是我们想要的效果。所以 我们可以通过保存上一次的选中记录 和本次的选中记录进行对比，然后最新的选中记录回显在页面上就达到了我们想要的效果。

主要代码

<el-cascader-panel
 @change="cascaderChange($event)"
 ref="cascader"
>
 </el-cascader-panel>
 cascaderChange(val) {
          
   
  let auditPerson = {
          
   };
auditPerson=this.getCascader(val,this.$refs.cascader.getCheckedNodes());
 this.auditPersonIdsName = auditPerson.auditPersonIdsName;	//回显的数据
}
    getCascader(val, AAA,type) {
          
   
      let auditPerson = {
          
   
        auditPersonIds: [],
        auditPersonIdsName: [],
      };
    
      if(this.tempData.length > 0 && this.tempData.length <= val.length) {
          
   
        val.forEach((item)=> {
          
   
          if(this.tempData.indexOf(item) == -1) {
          
   
            this.tempData.push(item)
          }
        })
      }else if(val.length < this.tempData.length) {
          
   
        this.tempData.forEach((item,index)=> {
          
   
          if(val.indexOf(item) == -1) {
          
   
            this.tempData.splice(index,1)
          }
        })
      }else {
          
   
        this.tempData= JSON.parse(JSON.stringify(val));
      }
      auditPerson.auditPersonIds = this.tempData;
      this.tempData.forEach((temp)=> {
          
   
        AAA.forEach((item) => {
          
   
          if (temp == item.value) {
          
   
            auditPerson.auditPersonIdsName.push(item.label);
          }
        });
      })
      return auditPerson;
    },

记录一下遇到的问题，如果有其他更好的办法，欢迎讨论😁😁😘