性能概述：我的项目里有很多表格，心愿表格加载动效难看一点，有多少列就显示多少列在加载，做成公共组件。
成果：

实现形式：在公共组件文件夹中创立vue，编写后，在main.js中引入即可。
loadSkeleton.vue

<template>  <el-skeleton style="width: 100%" animated>    <template slot="template">      <div class="skeleton">        <div class="skeleton-th">          <el-skeleton-item            v-show="haveLeftNumber"            variant="h1"            class="small"            :style="{ margin: columns < 10 ? '0 32px' : columns < 15 ? '0 12px' : '0 6px' }"          />          <el-skeleton-item            variant="h1"            v-for="t of columnArr"            :key="t + 'loadSkeleton-th'"            :style="{ margin: columns < 10 ? '0 32px' : columns < 15 ? '0 12px' : '0 6px' }"          />        </div>        <div class="skeleton-tr" v-for="t of rowArr" :key="t + 'loadSkeleton-tr'">          <el-skeleton-item            v-show="haveLeftNumber"            variant="text"            class="small"            :style="{ margin: columns < 10 ? '0 32px' : columns < 15 ? '0 12px' : '0 6px' }"          />          <el-skeleton-item            variant="text"            v-for="t of columnArr"            :key="t + 'loadSkeleton-td'"            :style="{ margin: columns < 10 ? '0 32px' : '0 12px' }"          />        </div>      </div>    </template> </el-skeleton></template><script>export default {  name: 'loadSkeleton',  props: {    rows: {      type: Number,      default: 10    },    columns: {      type: Number,      default: 5    },    haveLeftNumber: {      type: Boolean,      default: true    }  },  computed: {    rowArr() {      const arr = []      for (let i = 1; i <= this.rows; i++) {        arr.push(i)      }      return arr    },    columnArr() {      const arr = []      for (let i = 1; i <= this.columns; i++) {        arr.push(i)      }      return arr    }  }}</script><style>.skeleton {  display: flex;  flex-direction: column;  align-items: center;  justify-items: space-between;}.skeleton-th {  display: flex;  align-items: center;  position: relative;  width: 100%;  height: 54px;  box-sizing: border-box;  background: #fafafa;}.skeleton-th .el-skeleton__h1 {  height: 32px;}.skeleton-tr {  display: flex;  align-items: center;  position: relative;  width: 100%;  height: 52px;  box-sizing: border-box;  border-bottom: 1px solid #e8e8e8;}.skeleton-tr * {  height: 18px;}.skeleton-th .small {  flex-grow: 0;  flex-shrink: 0;  flex-basis: 18px;  width: 18px;  height: 18px;}.skeleton-tr .small {  flex-grow: 0;  flex-shrink: 0;  flex-basis: 18px;  width: 178px;}</style>

main.js中引入专用组件

// 引入表格加载骨架屏组件import loadSkeleton from '@/components/loadSkeleton'Vue.component('load-skeleton', loadSkeleton)

在须要的中央应用：

<load-skeleton v-show="loading" :columns="12" :rows="5" :haveLeftNumber="false"></load-skeleton>