ant 树形表格的增删

最近用ant 的树表格做功能，实现了树表格的增删改查。

首先来看需求。树表格最多五层，可以编辑。渲染后台传过来的数据，也可以新增树，同级别，或者子级。

一开始因为新增的子或者同级别没有固定的ID，然后树表格要有一个唯一的rowkey。这里不能用index,父级的index从0开始增加，子级别也是。所以开始要构造一个唯一的key.

首先给每个元素增加key,类似'0','0_0','0_0_0'这种最多五级。注意这些参数不能单纯的想做index,因为后面删除功能可能会删掉‘0_0’,'0_1'就变成了子集第一个。

给所有元素添加唯一key

let loopArr = [
  {
    name: "lisi",
    age: 12,
    children: [
      {
        name: "wangwu",
        age: 13,
        children: [
          {
            age: 14,
            name: "zhaoliu",
          },
        ],
      },
    ],
  },
];
function addKey(loopArr, currentStep = 0, pId = 0) {
      const configs = [];
      console.log(loopArr, currentStep, pId, "元素循环次数");
      loopArr.forEach((item, index) => {
        if (!item.children || item.children.length < 1) {
          const t = {
            ...item,
            key: currentStep == 0 ? index.toString() : pId + "_" + index,
          };
          t.children = undefined;
          configs.push(t);
        }
        if (item.children && item.children.length > 0) {
          const parent = {
            ...item,
            key: currentStep == 0 ? index.toString() : pId + "_" + index,
          };
          parent.children = addKey(item.children, currentStep + 1, parent.key);
          configs.push(parent);
        }
      });
      console.log(configs, "构造数据");
      return configs;
    }

    addKey(loopArr, 0, 0);

最后成功实现给数组的所有元素（子元素添加了key） 

过两天会继续结合项目开始写增加和删除

  const  dataSource = reactive<any>({ list: [] })
    dataSource.list = [
      {
        name: "lisi",
        age: 12,