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

一.基本使用

给一个组件，如：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.valueif(res.code == 200){//如果查到了该挂号id对应的暂存病历记录，则赋值给medicalRecordDtomedicalRecordDto.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)

3.展示效果

可见此时，就有了交互效果，很不错。