ElementUI tables use the skeleton screen vue-elementUi-skeleton correctly

1, install,

npm i vue-elementui-skeleton

2, the introduction of

import Vue from 'vue'; import VueElementUISkeleton from 'vue-elementui-skeleton'; Vue.use(VueElementUISkeleton, { directiveName: 'skeleton', rows: 10, radius: 3, bg: 'red' }); Use (VueElementuiskeleton, {DirectiveName: 'skeleton', Rows: 10, Radius: 3, bg: 'red'}); * /

3, references,

<template> <el-table v-skeleton="{loading: loading, rows: 10}" :data="tableData" style="width: > <el-table-column prop="date" label=" date" width="180" /> <el-table-column prop="name" label=" name" width="180" /> > </el-table> </template> <script> export default {data() {return { loading: false, tableData: [] }; }, mounted() {// Mounted () {let that = this; that.loading = true; setTimeout(function () { that.loading = false; That. TableData = [{date: '2016-05-02', name: 'Wang Xiaohu ', address:' Lane 1518, Jinshajiang Road, Putuo District, Shanghai '}, {date: '2016-05-04', name: 'Wang Xiaohu ', address:' Lane 1517, Jinshajiang Road, Putuo District, Shanghai ', {date: '2016-05-01', address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'}, {date: 2016-05-03, name: 'Wang Xiaohu ', address:' Lane 1516, Jinshajiang Road, Putuo District, Shanghai '}]; }, 2000); }}; </script>