element-plus中，Loading 加载组件的使用

news2025/4/2 10:19:57

一.基本使用

给一个组件，如：table表格，加上v-loading="true"即可。

举例：复制如下代码。

<template>
  <el-table v-loading="loading" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(true)

const tableData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]
</script>

运行效果：

解读：因为v-loading属性的值一直是true，所以这个表格会一直转圈。

二.实战1：

1.不使用Loading加载组件时存在的问题

在项目中，我们经常会通过axios请求后端，来获取渲染表格的数据。

有些情况下，如果不使用Loading加载组件，就会显得页面很生硬，没有交互感，如下：当我们选择某个患者时，对应的病例表单就会直接生硬地展示出来，没有任何交互感。此时就需要我们使用Loading加载组件来展示加载特效。

2.实现步骤

①给病历表单所在的dom元素，加上v-loading属性。

②创建自定义变量isLoading，用来控制加载动效是否显示

//控制是否显示加载动效
const isLoading = ref(false);//一开始不显示加载动效

③向后端axios发送请求时，展示加载动效（令isLoading=true），计时1秒后，将后端获取的数据赋值给对应的前端对象，然后关闭加载动效（令isLoading=false）即可。

//1.根据患者的挂号id，去medical_record表中查询对应的暂存病历信息
const res = await queryTemStoreMedicalRecord(row.id);
//2.展示加载动效
isLoading.value = true;
//3.显示1秒后，查询后台数据并关闭加载动效
setTimeout(() => {
    //3.1将后台查询到的函数，赋值给medicalRecordDto.value
    if(res.code == 200){
        //如果查到了该挂号id对应的暂存病历记录，则赋值给medicalRecordDto
        medicalRecordDto.value = res.data;
        //alert(JSON.stringify(medicalRecordDto.value))
    }else{
        //如果没查到，就清空病历表单(但保留所选择的患者的挂号id)
        medicalRecordDto.value = {
            //id:"",//数据库自增
            registId:row.id,
            chiefComplaint:"",
            present:"",
            presentTreat:"",
            history:"",
            allergy:"",
            physique:"",
            proposal:"",
            care:"",
            checkResult:"",
            diagnose:"",
            handle:"",
            state:""
        }
    }
    //3.2关闭加载动效
    isLoading.value = false;
},1000)