骨架屏 Skeleton

引入

按需引入

如果是按需引入的element 需要引入 Skeleton 与SkeletonItem

页面中使用

骨架屏是在请求数据库数据未回来之前 显示的html结构，称之为骨架，这样做是为了更好的用户体验。

骨架屏的用法：

用el-skeleton标签包裹起来的就是用骨架屏的地方，内部分为两部分，一是数据未回来之前显示的由el-skeleton-item所显示的骨架结构可以自定义，另一部分是数据回来之后显示的真实数据结构，两部分都由template标签包裹，用法为剧名插槽用法 数据回来之前是显示骨架结构等数据回来之后替换成真实数据 在包裹骨架结构的template上写上#template意思为会渲染名字为template的标签包含的内容，而真实数据结构就是标签名为template的结构，控制骨架屏显示与隐藏的是loading，初始值状态是在data里定义的，初始为true，等数据请求回来改为false

骨架屏就会被自动替换成真实数据渲染的DOM结构 所以当你请求数据接口成功的时候不妨加一句话，this.loading = false 这就是更改loading的状态

示例：

<template>
  <div class="grade_box">
    <el-skeleton  animated :loading="loading" >//loading控制显示与隐藏
      <template #template>//骨架屏结构
        <el-skeleton-item  style = "width: 130px;height: 23px;" />
      </template>
			<template>//真实数据结构
  			<div class="occupation_box">
  			</div>
			</template>
		</el-skeleton>
  </div>
</template>
<script>
  export default {
  data () {
    return {
      loading: true,
    }
  },
}
</script>