vue 的表格loading

在 Vue 中使用表格时，我们通常需要在表格数据加载时显示 loading 状态。可以通过以下方式实现：

1. 使用 Vue 自带的 v-if 指令，在表格数据加载时显示 loading 状态：

<template>
  <div>
    <table v-if="!loading">
      <!-- 表格内容 -->
    </table>
    <div v-else>
      <!-- loading 状态 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: []
    };
  },
  methods: {
    loadData() {
      this.loading = true;
      // 加载数据
      fetchData().then(data => {
        this.tableData = data;
        this.loading = false;
      });
    }
  }
};
</script>

2. 使用第三方组件库中的表格组件，例如 Element UI 中的 el-table 组件已经内置了 loading 功能，直接使用即可：

<template>
  <el-table :data="tableData" :loading="loading">
    <!-- 表格列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: []
    };
  },
  methods: {
    loadData() {
      this.loading = true;
      // 加载数据
      fetchData().then(data => {
        this.tableData = data;
        this.loading = false;
      });
    }
  }
};
</script>