vue3请求接口添加elementplus加载中,数据回来太快页面会闪一下,怎么解决?

Question

vue3请求接口添加elementplus加载中,数据回来太快页面会闪一下,怎么解决?

Answer 1

仅供参考

<template>
  <div>
    <el-button @click="onSearch">搜索</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      loading: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    async onSearch() {
      const id = this.showLoading(500);
      const res = await this.test();
      this.tableData = res;
      this.hideLoading(id);
    },

    showLoading(delay = 300) {
      const id = setTimeout(() => {
        this.loading = true;
      }, delay);
      return id;
    },

    hideLoading(id) {
      clearTimeout(id);
      this.loading = false;
    },

    test() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve([
            {
              date: Date.now(),
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ]);
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>