加载状态

• 全组件 loading 依赖于 el-loading 参考文档 (opens new window)
• 按钮 loading 参考文档 (opens new window)

<template>
  <div
      class="GeneralLoading"
      style="margin: auto; max-width: 1600px; height: 600px; position: relative"
  >
    <!-- 实际开发中需要传入request方法 -->
    <oce-general
        ref="xnyGeneral"
        v-loading="loading"
        :option="generalOption"
        :urlInfo="urlInfo"
    >
      <!-- 工具栏左侧插槽 -->
      <template #toolbar-menu-left>
        <el-button @click="onload">组件loading</el-button>
        <el-button :disabled="btnLoading" :icon="btnLoading ? 'el-icon-loading': null" @click="btnLoad">
          单独按钮loading
        </el-button>
      </template>
      <!-- 表格操作列插槽 -->
      <template #table-menu-left>
        <el-button
            :disabled="btnLoading"
            :icon="btnLoading ? 'el-icon-loading': 'el-icon-folder'"
            size="mini"
            type="text"
            @click.stop="btnLoad"
        >
          单独按钮loading
        </el-button>
      </template>
    </oce-general>
  </div>
</template>

<script>
export default {
  name: 'GeneralLoading',
  data() {
    return {
      urlInfo: {
        optionUrl: {
          url: '/system/webTable/tableInfo',
          method: 'post',
          webTableName: 'testTable',
        },
        dataUrl: {
          url: '/system/webTable/tableData',
          method: 'post',
        },
      },
      generalOption: {
        tableOption: {
          menuWidth: '300px'
        }
      },
      loading: false,
      btnLoading: false,
    }
  },
  methods: {
    onload() {
      this.loading = true
      // 此处为模拟关闭，实际开发中应为接口返回后关闭 loading
      setTimeout(() => this.loading = false, 3000)
    },
    btnLoad() {
      this.btnLoading = true
      // 此处为模拟关闭，实际开发中应为接口返回后关闭 loading
      setTimeout(() => this.btnLoading = false, 3000)
    },
  },
  created() {
  },
}
</script>

Expand Copy Copy