关于vxeTable转换树状表格以及问题思考

一、背景

在使用vxeTable中，遇到了一直提示key重复问题，通过一系列排查，找到了问题所在，特此记录。

二、遇到的问题

<StyleProvider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
      <AppProvider>
        <RouterView class="bg-layout" />
      </AppProvider>
</StyleProvider>

之前使用vxetable由于后端传来的数组对象是平级，翻阅文档发现transform设置可以直接在内部转化，可以不用自己处理数据。后面发现我定义的rowConfig.keyField使用的是gzdcode字段(后端说是主键)，导致id重复表格显示异常。便进行了一层处理，改用lid+gzdcode。

此次解决过后，验证出问题的数据之后，匆忙上了生产，后续我无意操作此处的树状结构发现还存在问题，于是我便重新思考解决。

找出问题所在

首先我将原始数据进行打印，并且在控制台进行搜索重复的uniqueId值，结果我发现，出现error的几个值并没有发现重复，我就觉得纳闷，就去GitHub上希望可以寻找答案。转了一圈发现issue并没有人提出类似的问题。后面想到了使用xe-utils自带的toArrayTree转换成树状，并且去除组件的transform发现有同样的问题。

后面将转换后的数据在控制台进行搜索重复的uniqueId值，同样没有重复数据，那到底哪里重复了？后面想到复制到json文档中进行搜索，还真让我发现了重复的两条数据。

同样的一条数据，因为他们的父级id相同（但是父级的uniqueId不同），导致同一条数据插入到了两条流向下面（一正一负），我当时就想拿数据找后端对峙，后面想到了之前后端的种种劣迹，还是自己想办法解决。

解决办法

如果是同一条数据分别插入到两个父级元素，那肯定数据自带的字段生成uuid这个方法肯定不行。而且哪怕后端跟我生成了一个主键也并没有用。vxeTable内部自带的平级转树状肯定也是没用的。

我应该使用vxeTable自带的toArrayTree方法进行转层级结构，并且转化完之后递归给每个item生成uuid，代码如下：

tableDetailList.value = addUniqueId(toArrayTree(cloneDeep(data), { key: 'id', parentKey: 'parentID' }));
function addUniqueId(data: any[]) {
  if (!data) return [];
  return data.map(item => {
    item.uniqueId = nanoid();
    if (item.children && item.children.length > 0) {
      item.children = addUniqueId(item.children);
    }
    return item;
  });
}

后续

完事过后，我发现还是提示显示重复的主键提示，百思不得其解，我开始审视我的代码，并且debugger调试。终终终终终终终终于让我发现问题，toArrayTree方法应该没有将重复主键的children中的item进行深拷贝，导致之前重复数据引用地址一样，导致uniqueId赋值时候，实际上改了不同父级的同一数据，果然AI写的代码没有那么靠谱（必须有人背锅）。 所以我在addUniqueId方法中return item加一个深拷贝。

function addUniqueId(data: any[]) {
  if (!data) return [];
  return data.map(item => {
    item.uniqueId = nanoid();
    if (item.children && item.children.length > 0) {
      item.children = addUniqueId(item.children);
    }
    return cloneDeep(item);
  });
}

终于问题解决。