vue 异步更新datagrid

在 Vue 中更新 DataGrid 数据通常需要进行异步操作。一种常见的方式是使用 Promise 对象，如下所示：

1. 在 Vue 组件中定义一个 Promise 对象

data() {
  return {
    dataGridData: null,
    loadDataPromise: null
  }
}

2. 在 Vue 组件的 mounted 函数中调用异步加载数据的方法，并将 Promise 对象赋值给 loadDataPromise

mounted() {
  this.loadDataPromise = this.loadData();
}

3. 在 loadData 函数中使用异步请求获取数据，并在 Promise 对象的 resolve 方法中更新 dataGridData

loadData() {
  return new Promise((resolve, reject) => {
    // 异步请求获取数据
    axios.get('/api/data')
      .then(response => {
        // 更新 dataGridData
        this.dataGridData = response.data;
        resolve();
      })
      .catch(error => {
        reject(error);
      });
  });
}

4. 在 DataGrid 组件中使用 dataGridData 属性渲染数据

<template>
  <div>
    <el-data-grid :data="dataGridData"></el-data-grid>
  </div>
</template>

这样就可以在 Vue 中异步更新 DataGrid 数据了。