需求：对表格操作列中的操作进行局部刷新

需求：对表格操作列中的操作进行局部刷新，如action列中有勾号，叉号，来回切换按钮能够改变数据状态，同时不希望使用整体调接口查询数据来刷新，这里用"局部刷新（缓存方式）"实现

如下图：

表格结构

js 复制代码

<el-table-column
                  prop="address"
                  label="Action"
                  width="120"
                  align="center"
                >
                  <template #default="scope">
                    <div class="tableTools">
                      <template v-if="scope.row.show">
                              <el-button
                                @click="
                                  fileStatusBtn(
                                    scope.row.id,
                                    0,
                                    scope.row,
                                    scope.$index
                                  )
                                "
                                link
                                title="Set the file status (hide or show) for new reviewer and author"
                                type="primary"
                              >
                                <el-icon><Select /></el-icon>
                              </el-button>
                            </template>
                            <template v-else>
                              <el-button
                                @click="
                                  fileStatusBtn(
                                    scope.row.id,
                                    1,
                                    scope.row,
                                    scope.$index
                                  )
                                "
                                link
                                title="Set the file status (hide or show) for new reviewer and author"
                                type="primary"
                              >
                                <el-icon>
                                  <CloseBold />
                                </el-icon>
                              </el-button>
                            </template>

                  
                    </div>
                  </template>
                </el-table-column>

方法

js 复制代码

const fileStatusBtn = (id, status, row, index) => {
    row.show = !row.show; // show是用来控制勾号，叉号的交替显示
    // 局部更新某一条数据的show状态，不要重新调用接口，造成服务器压力
    updateRowData(index, "show", row.show);
    
    // 原先的调整个表格接口查询新结果
    // emit("uploadDatas"); 
};

updateRowData方法

js 复制代码

// 修改数据并同步更新缓存的方法
const updateRowData = (rowIndex, key, value) => {
  // 修改当前数据
  const cacheKey = `tableSubmissionData_${pageId}`;
  const cachedData = JSON.parse(localStorage.getItem(cacheKey));

  if (cachedData) {
    // 修改缓存中的数据
    cachedData.data.content.preReview.articleFiles[rowIndex][key] = value;

    // 同步到组件的内存数据
    aeInfor.value.reviewFiles[rowIndex][key] = value;

    // // 更新缓存
    updateCache(cacheKey, cachedData);
  }
};

const updateCache = (key, data) => {
  localStorage.setItem(key, JSON.stringify(data));
};

联调接口的方法中添加缓存数据判断

js 复制代码

const cacheKey = ref("");

const getSubmissionTabDatas = async () => {
  // 使用 localStorage 缓存数据，避免重复请求
  cacheKey.value = `tableSubmissionData_${pageId}`;
  const cachedData = localStorage.getItem(cacheKey.value);

  if (cachedData) {
    const res = JSON.parse(cachedData);

    allDatas.value = res.data.content;
    participent.value = res.data.content.summary.participantList;
    lastRoundId.value = res.data.content.summary.roundid;
    tabButtons.value = res.data.content.tabButtons;
    isachive.value = res.data.content.isachive ? true : false;
    aeInfor.value.reviewFiles = res.data.content.preReview.articleFiles;
    allDatas.value.showBlackList = res.data.content.showBlackList;

    console.log("====缓存===", aeInfor.value.reviewFiles);

    return; // 从缓存中获取数据，不需要再进行 API 请求
  }

  await getSubmissionTab({
    id: pageId,
    type: pageType ? "editorialAssistant" : undefined,
    accessArticle: route.query.isOnlyShowSE ? 1 : undefined,
  }).then((res) => {
    localStorage.setItem(cacheKey.value, JSON.stringify(res));

    allDatas.value = res.data.content;
    participent.value = res.data.content.summary.participantList;
    lastRoundId.value = res.data.content.summary.roundid;
    tabButtons.value = res.data.content.tabButtons;
    isachive.value = res.data.content.isachive ? true : false;
    aeInfor.value.reviewFiles = res.data.content.preReview.articleFiles;
    allDatas.value.showBlackList = res.data.content.showBlackList;

    console.log("====接口===", aeInfor.value.reviewFiles);
  });
};

缓存数据清除

js 复制代码

const handleBeforeUnload = (event) => {
  localStorage.clear();
  localStorage.removeItem(cacheKey.value);
};

onMounted(async () => {
  window.addEventListener("beforeunload", handleBeforeUnload);
  localStorage.clear();
  localStorage.removeItem(cacheKey.value);
  await getSubmissionTabDatas();
  
  ----------------------------------------------------------------
  await initializeCollapseState(); // 初始化折叠状态
  nextTick(() => {
    const el = document.getElementById("submissionId");
    if (!route.query.roundIndex) return;
    el?.scrollIntoView({
      behavior: "smooth", //smooth:平滑，auto：直接定位
      block: "start",
      inline: "start",
    });
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("beforeunload", handleBeforeUnload);
  localStorage.clear();
  localStorage.removeItem(cacheKey.value);
});