欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

v-loading的使用(ElementUI)

程序员文章站 2022-06-07 22:43:01
...

前言:需要获取后端接口数据到页面上进行显示,所以在请求发起至数据渲染页面的这段时间,为页面提供一个 loading 加载是极为必要的。
1.区域加载
    以 table 表格为例,使用 v-loading,为其绑定一个布尔值(true/false),代码如下:

<template>
  <div id="index">
  <!-- 表格 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column type="selection"></el-table-column>
      <el-table-column sortable prop="name" label="姓名"></el-table-column>
      <el-table-column sortable prop="number" label="代号"></el-table-column>
      <el-table-column sortable prop="age" label="年龄"></el-table-column>
      <el-table-column sortable prop="sex" label="性别">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sex === '1' ? 'primary' : 'success'" disable-transitions>
            {{scope.row.sex==='1'? '男': '女'}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
   </div>
</template>

<script>
export default {
  name: "index",
  data () {
    return {
      loading: false,   // 默认为false不显示加载
      tableData:[]   // 数据
    }
  },
  created() {
    // 调用获取数据方法
    this.getdata()
  },
  methods: {
  	// 获取数据方法
  	getdata() {
  	  this.loading = true
      // 模拟获取接口数据
      setTimeout(() => {
      	this.tableData = [  // 模拟数据
        {
          name: 'wangfu',
          number: '001',
          age: '24',
          sex: '1'
        },
        {
          name: 'wangfu',
          number: '001',
          age: '24',
          sex: '1'
        }
      	],
        this.loading = false
      }, 1000)
  	}
  }
}

2.自定义加载
    添加 element-loading-text 属性为加载文字显示在加载图标的下方, element-loading-spinner 属性为设定图标的类名,element-loading-background 属性为背景色值,代码如下:

<el-table :data="tableData" 
	v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"></el-table>
`
3.整页加载
&nbsp;&nbsp;&nbsp;&nbsp;使用指令方式来实现整页加载时,全屏遮罩需要添加fullscreen修饰符(遮罩会插入至 body 上),此时若需要锁定屏幕的滚动,可以使用lock修饰符,代码如下:
```javascript
v-loading.fullscreen.lock="loading"