element-ui组件Skeleton 骨架屏不显示问题解决

问题:项目中使用的是全局注册的方式注册element组件,通过import导入后通过Vue.use注册但是使用的时候该组件并没有显示
在这里插入图片描述
解决:需要同时再引入ElSkeletonItem
在这里插入图片描述在这里插入图片描述

---------------------------分割线----------------------------------------

由于篇幅不能太短,所以再讲下解决过程,可以直接跳过

查看元素如下:
在这里插入图片描述
发现内部的标签是el-skeleton-item,感觉是没有解析出来。
在导入Skeleton的地方ctrl+左键可以查看导出组件的文件,发现SkeletonItem是一个单独的组件,然后问题就迎刃而解了
在这里插入图片描述

ElementUI-Plus是Vue.js的一套UI框架,提供了丰富的组件和特性。其中之一就是骨架组件,可以为页面加载过程中的占位符加上动画效果,提高用户体验。下面为大家演示如何使用ElementUI-Plus的骨架组件。 首先,我们需要引入ElementUI-Plus和Vue.js。可以使用CDN或者npm来引入: ```html <!-- 引入ElementUI-Plus --> <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/element-plus@next"></script> ``` 接下来,在Vue组件中使用骨架组件。例如,我们要为一个表格添加骨架: ```html <template> <div> <el-table v-if="!loading" :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <el-skeleton v-else></el-skeleton> </div> </template> ``` 在上面的代码中,我们使用了v-if来控制表格的显示和隐藏。通过判断loading变量是否为true,来确定当前页面是否正在加载。当loading为true时,我们使用el-skeleton组件显示骨架。 接着,在Vue组件中定义loading变量,并在合适的时机将其设置为true或false。例如,在mounted钩子函数中,我们可以通过异步请求数据来设置loading变量: ```javascript <script> import { reactive, onMounted } from 'vue'; import { ElTable, ElTableColumn, ElSkeleton } from 'element-plus'; export default { components: { ElTable, ElTableColumn, ElSkeleton, }, setup() { const state = reactive({ loading: true, tableData: [], }); onMounted(async () => { try { const res = await fetch('/api/getTableData'); state.tableData = await res.json(); } catch (error) { console.error(error); } finally { state.loading = false; } }); return state; }, }; </script> ``` 在上面的代码中,我们使用了Vue3的Composition API来定义组件。通过reactive函数将对象转化为响应式对象,并定义了loading和tableData两个属性。在mounted钩子函数中,我们使用fetch函数来异步请求数据,并将loading设置为false,以显示表格。 最后,我们需要在页面中引入这个Vue组件,并使用它来渲染HTML。例如,我们可以使用以下代码: ```html <body> <div id="app"> <my-component></my-component> </div> <script src="./index.js"></script> </body> <script> import { createApp } from 'vue'; import MyComponent from './MyComponent.vue'; createApp(MyComponent).mount('#app'); </script> ``` 在上面的代码中,我们使用createApp函数来创建Vue实例,并将组件MyComponent挂载到id为app的DOM节点上。在MyComponent组件中,我们使用了ElementUI-Plus的骨架组件,来为表格添加动画效果。当loading为true时,骨架显示在页面中,以提高用户体验。 这样,我们就成功地使用ElementUI-Plus的骨架组件为页面添加了动画效果。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值