arco design框架中的树形表格使用中的缓存问题

目录

1.问题

2.解决方案


1.问题

arco design框架中的树形表格使用中的缓存问题,使用了树形表格的load-more懒加载

点击展开按钮后,点击关闭,再次点击展开按钮时,没有调用查询接口,而是使用了缓存的数据。

2.解决方案

使用load-more懒加载时存在缓存问题,然后增加行点击事件

在行点击事件中,查询当前节点的子节点信息,然后设置child信息,然后再展开当前节点

然后在点击页面的查询处理时,关闭所有节点

这样如果想看到最新的子节点信息,通过行点击事件来进行查看,原来的展开按钮可以用来查看之前的子节点信息

示例代码

追加了行点击事件

复制代码
<a-table :columns="columns" :data="dataList" :loading="loading" ref="tableRef"
         :bordered="{cell:true}" column-resizable row-key="id"
         :pagination="pagination" @page-change="onPageChange" @page-size-change="onPageSizeChange"
         :scroll="{ x: '100%',y: '100%'}" :scrollbar="true"
         :load-more="loadMore" v-model:expandedKeys="expandedKeys" @row-click="rowClick">
  <template #createDate="{ record }">
    {{ moment(record.createDate).format('YYYY-MM-DD HH:mm:ss') }}
  </template>
  <template #operations="{ record }">
    <a-space :size="10">
      <a-button status='success' @click="viewDetail(record.id, record.fileId, record.fileName)">
        查看详情
      </a-button>
    </a-space>
  </template>
</a-table>

每次查询时,取消所有的展开状态

复制代码
const getDataList = async () => {
  loading.value = true;
  try {
    const offset = (pagination.value.current - 1) * pagination.value.pageSize
    const limit = pagination.value.pageSize
    const res = await apiGetArchiveList({
      page: {offset: offset, limit: limit},
      archiveName: form.value.archiveName,
      sourceName: form.value.sourceName,
      level: form.value.level,
      fileId: form.value.fileId,
    });
    res.rows.forEach((item: any) => {
      item.key = item.id;
    })
    dataList.value = res.rows;
    pagination.value.total = res.total;
    tableRef.value.expandAll(false)
    expandedKeys.value = []
  } finally {
    loading.value = false;
  }
}

loadmore正常使用,不使用时不出现展开按钮

复制代码
const loadMore = async (record: any, done: any) => {
  // 调用接口查询子树信息
  const res = await getChildList(record.id)
  // 显示数据
  record.children = undefined;
  done(res)

}

追加行点击事件,获取子节点信息,并展开节点

复制代码
const getChildList = async (id: string) => {
  const res = await apiGetChild({id: id})
  res.forEach((item: any) => {
    item.key = item.id;
  })
  return res;
}


const rowClick = async (record: any) => {
  // 调用接口查询子树信息
  const res = await getChildList(record.id)
  record.children = res

  // 展开
  tableRef.value.expand(record.id, true)
}
相关推荐
全栈小董1 个月前
arco design vue 表格Table自定义筛选
前端·vue.js·arco design
假意诗人4 个月前
【NextJS】Arco Design与Next.js快速上手
开发语言·javascript·arco design
昔人'4 个月前
基于 Arco Design UI 封装的 Modal 组件
javascript·vue.js·ui·arco design
RationalDysaniaer5 个月前
Umi UI报错:连接失败,请尝试重启dev服务
arco design·anti-design-vue
刘大逵7 个月前
Arco Design,字节跳动出品的UI库
ui·arco design
疾风终究没有归途8 个月前
Arco Design:引领未来的Vue 3创意先锋,一键开启高效与美感并重的Web开发之旅!
前端·前端框架·vue·arco design
FLK_90908 个月前
Vue3 的福音框架:Arco Design
arco design
素味平生8 个月前
Arco Design 之Table表格
前端·arco design
linab11210 个月前
使用arco design实现动态列信息的表格
arco design