如何在方法中修改v-data-table的loading属性为false？

第一步：把loading改成绑定响应式变量 #

你现在代码里的loading=""是静态属性，没法动态修改状态，得换成绑定一个响应式变量：

<v-layout fluid v-resize="onResize" child-flex>
  <v-data-table
    :loading="isLoading" <!-- 替换原来的loading=""，用v-bind绑定变量 -->
    loading-text="加载中..."
    :footer-props="{ 'items-per-page-options': [50, 100, 250, -1] }"
    dense
    dark
    fixed-header
    calculate-widths
    :height="windowSize.y - 63 - 60"
    :headers="headers"
    :items="res"
    class="elevation-1"
    sort-by="publicationDate"
    :sortDesc= "sortVal"
  >
  </v-data-table> <!-- 注意补全组件的闭合标签 -->
</v-layout>

第二步：定义变量和控制方法 #

在组件的脚本部分，先声明控制loading的响应式变量，再写一个方法把它设为false：

Vue 2 选项式API写法

export default {
  data() {
    return {
      isLoading: true, // 初始可设为true，根据你的实际场景调整
      // 其他已有的变量：headers, res, sortVal, windowSize...
    }
  },
  methods: {
    stopTableLoading() {
      this.isLoading = false; // 核心：把loading状态设为false
    },
    // 你原来的onResize方法...
  },
  // 示例：数据加载完成后调用方法关闭loading，比如在接口请求回调里
  mounted() {
    // 模拟接口请求，2秒后关闭loading
    setTimeout(() => {
      this.stopTableLoading();
    }, 2000);
  }
}

Vue 3 组合式API写法

import { ref, onMounted } from 'vue';
export default {
  setup() {
    const isLoading = ref(true); // 用ref声明响应式变量

    const stopTableLoading = () => {
      isLoading.value = false; // 组合式API里要通过.value修改值
    };

    // 示例：数据加载完成后调用方法
    onMounted(() => {
      setTimeout(() => {
        stopTableLoading();
      }, 2000);
    });

    return {
      isLoading,
      stopTableLoading,
      // 其他变量：headers, res, sortVal, windowSize...
    }
  }
}

重点说明 #

• 必须用:loading（v-bind语法）绑定响应式变量，静态的loading=""无法实现动态状态修改；
• stopTableLoading方法可以在任何需要的时机调用，比如接口请求成功后、用户操作完成后等。

内容的提问来源于stack exchange，提问作者Quentin