vue3 表格按钮loading

在Vue3中，当处理表格中的数据加载操作时，通常会利用`v-loading`指令来显示一个加载状态。例如，你可以将它放在按钮上，当按钮点击时开始加载数据，同时显示一个加载图标或文字，直到数据加载完成再隐藏。

以下是一个简单的示例：

<template>
  <button @click="loadData" v-loading="isLoading">加载数据</button>
  <table ref="myTable">
    <!-- ... -->
  </table>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      // 表格数据数组
      tableData: [],
    };
  },
  methods: {
    async loadData() {
      this.isLoading = true; // 开始加载时设置isLoading为true
      try {
        const response = await yourApiCall(); // 模拟异步请求
        this.tableData = response.data;
      } catch (error) {
        console.error(error);
      } finally {
        this.isLoading = false; // 加载完成后设置isLoading为false
      }
    },
  },
};
</script>

在这个例子中，`v-loading`会监听`isLoading`的数据变化，当`isLoading`为`true`时，按钮上的文本或图标就会变为加载状态，数据加载完毕后返回到正常状态。