vue3中使用element-plus的v-loading失效问题

起因：table表格在查询时要实现loading转圈效果

经过：element-plus的loading组件引入后却不起效果

const tableLoading = ref(true)
const onQuery = async () => {
   tableLoading.value = true
   console.log("chaxun");
   
   await list(queryList).then(res => {
      console.log("查询成功");
      
      roleList.value = res
      tableLoading.value = false
   })
}

结果：经查https://blog.csdn.net/weixin_44733774/article/details/134935153

注册自定义指令loading：

在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句app.directive('loading',ElLoading.directive)，然后v-loading指令就能正常使用了

main.js

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { ElLoading } from 'element-plus'//【新增】

const app=createApp(App);
app.directive('loading',ElLoading.directive)//【新增】
app.mount('#app');

解决成功