ElementUI el-table树形表格懒加载手动刷新告别缓存，尽享实时数据！

前端

2022-12-31 16:58:48

ElementUI el-table树形表格懒加载手动刷新

ElementUI的树形表格和懒加载

ElementUI是一个广泛使用的前端UI框架，提供了一个强大的数据表格组件el-table。el-table支持树形表格，允许数据以父子级关系展示，从而可以方便地展开和折叠子级数据。

在树形表格中，可以使用懒加载模式，在展开子级节点时加载数据，从而提高性能并避免一次性加载大量数据。但是，ElementUI默认情况下，懒加载仅会在第一次展开时加载数据，后续展开将使用第一次缓存的数据，而不会重新加载。

手动刷新懒加载数据

在某些情况下，这可能会导致问题，例如：

子级数据发生变化，但不会自动刷新。
需要在每次展开时都加载最新数据。

为了解决这个问题，我们可以手动刷新树形表格的数据。以下是具体步骤：

1. 使用响应式数据变量存储数据

data() {
  return {
    data: []
  }
}

2. 手动刷新数据

refreshData() {
  this.$set(this.data, [])
  this.$nextTick(() => {
    this.loadData(null, null, () => {})
  })
}

代码示例

下面的代码示例展示了如何手动刷新el-table树形表格的数据：

<template>
  <el-table
    :data="data"
    lazy
    :load="loadData"
  >
    <el-table-column prop="name"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      data: []
    }
  },
  methods: {
    loadData(row, treeNode, callback) {
      // 加载数据
      this.$nextTick(() => {
        this.$set(this.data, row.children)
        callback()
      })
    },
    refreshData() {
      this.$set(this.data, [])
      this.$nextTick(() => {
        this.loadData(null, null, () => {})
      })
    }
  }
}
</script>