功能概述：项目里有很多表格，希望表格加载动效好看一点，有多少列就显示多少列在加载，做成公共组件。效果：
【Vue组件】表格骨架屏实现方式：在公共组件文件夹中创建vue，编写后，在main.js中引入即可。loadSkeleton.vue
代码语言：javascript复制<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中引入公用组件
代码语言：javascript复制// 引入表格加载骨架屏组件
import loadSkeleton from '@/components/loadSkeleton'
Vue.component('load-skeleton', loadSkeleton)在需要的地方使用：
代码语言：javascript复制<load-skeleton v-show="loading" :columns="12" :rows="5" :haveLeftNumber="false"></load-skeleton>
