手摸手带公司前端妹纸清晰的了解el-cascader组件删除错乱的问题缘由及解决方法

今天小组的前端妹纸 遇到了一个el-cascader删除tag错乱的问题，解决了半天都没找到原因，于是到我这边来请求支援！

我拿到项目调试了一下 发现这个问题确实比较 奇怪，大致的看了一下代码逻辑，看了一下源码 以及网上查阅了相关资料 

大概两个关键词 在脑海中被提取出来 tag  getchecknodes

1.tag就是输入框回显的内容 ，源码中删除tag是通过删除tag的下标去删除数据的 （注意 vue是通过数据操作视图了  不是操作dom）

2.getchecknodes是页面中被勾选的节点这个循序是排好序的 这里面的顺序直接影响输入框中最终的显示位置

举个例子 假设我页面中勾选了节点名称是 [''香蕉','苹果'，'桔子']，他们对应的id是[0,1,2]，且存到了服务端，但是当我从服务选发请求回显数据的时候 

后端返回的数据被我处理成了[1,2,0] ，业务中是没法排序毕竟并不是0 1 2这些数据 ，按照上面第一点所提的 当我删除id中值为0的这条数据（下标是2），并不会将节点中的'桔子删掉'而是将香蕉删除了，因为下标2 最初的id数组中对应的值是0  0所对应的节点是香蕉。so问题原因找到了 那接下来就是解决啦

 

  sourceMountList() {
      this.mount = [] //这个是下拉框v-model绑定的值
      sourceMountList().then(res => {
        let { mounts, mountSns } = this.mountDetail
        //这边是原先的处理mount的逻辑 因为mount的顺序与tag的顺序不一致导致删除错误
        mounts.forEach(el => {
          if(mountSns.find(cl => cl === el.sn)) {
            this.mount.push([el.typeName, el.sn])
          }
        })
        //下面的代码后加的 加上了问题就解决了
        //此处需要将cascader回显的值与输入框中回显的tag顺序是一致的 删除是根据下标去删的
        //因为后端返回的值 与 tag的顺序不是一致 会出现删除错位的问题 所以将已勾选的值（getCheckedNodes的值）赋值给v-model绑定的值就行了
        this.$nextTick(()=>{
          this.mount = this.$refs.select.getCheckedNodes().map(el=>el.path);
        })
      })
    },