Vue实现根据 RandomNumber 判断新增、避免重复添加且删除不存在的项，可按 “先删后增” 的逻辑处理：

Vue实现根据 RandomNumber 判断新增、避免重复添加且删除不存在的项，可按 “先删后增” 的逻辑处理：

// 进行同步
 savegiveannex(obj) {
                console.log(obj)
                this.listrow.costdetailsannexs = obj;

                // 步骤1：提取 obj 中所有的 RandomNumber（用于后续判断“删除”）
                const objRandomNumbers = obj.map(item => item.RandomNumber);

                // 步骤2：删除 tableData 中「RandomNumber 不在 obj 里」的项
                this.$refs.annexpages.tableData = this.$refs.annexpages.tableData.filter(tableItem => {
                    return objRandomNumbers.includes(tableItem.RandomNumber);
                });

                // 步骤3：新增 tableData 中「RandomNumber 不存在于 tableData」的项
                obj.forEach(item => {
                    // 检查 tableData 是否已有该 RandomNumber 的项
                    const isAlreadyExists = this.$refs.annexpages.tableData.some(tableItem => {
                        return tableItem.RandomNumber === item.RandomNumber;
                    });
                    if (!isAlreadyExists) {
                        const newItem = {
                            index: this.$refs.annexpages.tableData.length, // 新索引为当前数组长度（因为已过滤+待添加）
                            PictureName: item.PictureName,
                            PictureSize: item.PictureSize,
                            PictureType: item.PictureType,
                            PictureAurl: item.PictureAurl,
                            path: "*******",
                            PictureTime: item.PictureTime,
                            PictureAload: item.PictureAload,
                            RandomNumber: item.RandomNumber,
                        };
                        this.$refs.annexpages.tableData.push(newItem);
                    }
                });

            },

//实现 “手动新增到 tableData 的数据不受 obj 影响（不被删除、不被 obj 同步覆盖）
savegiveannex(obj) {
  console.log(obj);
  this.listrow.costdetailsannexs = obj;

  // 步骤1：提取 obj 中所有的 RandomNumber（用于判断“来自obj的数据”）
  const objRandomNumbers = obj.map(item => item.RandomNumber);

  // 步骤2：过滤 tableData，保留两种数据：
  // 1. 手动新增的（RandomNumber 为空）
  // 2. 来自obj且当前仍在obj中的（RandomNumber 非空且存在于obj中）
  this.$refs.annexpages.tableData = this.$refs.annexpages.tableData.filter(tableItem => {
    // 保留手动新增的数据（RandomNumber 为空）
    if (!tableItem.RandomNumber) return true;
    // 非手动新增的数据：只保留存在于当前obj中的
    return objRandomNumbers.includes(tableItem.RandomNumber);
  });

  // 步骤3：新增 obj 中“不在tableData中”的项（只处理RandomNumber非空的）
  obj.forEach(item => {
    // 检查tableData中是否已有该RandomNumber（只对比非空的）
    const isAlreadyExists = this.$refs.annexpages.tableData.some(tableItem => {
      // 只对比 RandomNumber 非空的数据
      return tableItem.RandomNumber && tableItem.RandomNumber === item.RandomNumber;
    });

    if (!isAlreadyExists) {
      const newItem = {
        index: this.$refs.annexpages.tableData.length,
        PictureName: item.PictureName,
        PictureSize: item.PictureSize,
        PictureType: item.PictureType,
        PictureAurl: item.PictureAurl,
        path: "******",
        PictureTime: item.PictureTime,
        PictureAload: item.PictureAload,
        RandomNumber: item.RandomNumber, // 来自obj的数据，RandomNumber非空
      };
      this.$refs.annexpages.tableData.push(newItem);
    }
  });
},

逻辑说明：

1. 提取标识集合：用 map 从 obj 中提取所有 RandomNumber，得到 objRandomNumbers 数组。
2. 删除无关项：用 filter 过滤 tableData，只保留 RandomNumber 在 objRandomNumbers 中的项（相当于删除 obj 里没有的项）。
3. 新增不存在项：遍历 obj，用 some 检查 tableData 是否已有当前 item 的 RandomNumber；如果没有，就构造新对象并添加到 tableData。

随机数：
生成一个高概率唯一的随机字符串，通常用于作为数据的唯一标识

 getRandomNumbers() {
      const timestamp = Date.now();
      const randomSuffix = Math.floor(Math.random() * 1000); // 添加随机数
      return `${timestamp}${randomSuffix}`;
},

逐行解释：

1. const timestamp = Date.now();
   • Date.now() 会返回当前时间距离 “1970 年 1 月 1 日 00:00:00 UTC” 的毫秒数（时间戳），例如 1694783221356。
   • 这个值是随时间不断递增的唯一值（每毫秒变化一次），保证了不同时间点调用时的差异性。
2. const randomSuffix = Math.floor(Math.random() * 1000);
   • Math.random() 生成一个 0~1 之间的随机小数（例如 0.123）。
   • 乘以 1000 后得到 0~1000 之间的小数（例如 123.456），再用 Math.floor() 取整，得到 0~999 之间的整数（例如 123）。
   • 这一步是为了增加随机性，避免同一毫秒内多次调用时生成相同的结果。
3. return timestamp{randomSuffix};
   • 将时间戳和随机后缀拼接成一个字符串，例如 1694783221356123。