关于vue.js:elementui的表格正确使用骨架屏vueelementuiskeleton

1、装置

npm i vue-elementui-skeleton

2、引入

import Vue from 'vue';import VueElementUISkeleton from 'vue-elementui-skeleton';Vue.use(VueElementUISkeleton, {    directiveName: 'skeleton',    rows: 10,    radius: 3,    bg: 'red'});// 能够设置选项的全局默认值和指令名称/*Vue.use(VueElementUISkeleton, {    directiveName: 'skeleton',    rows: 10,    radius: 3,    bg: 'red'});*/

3、援用

<template>  <el-table     v-skeleton="{loading: loading, rows: 10}"    :data="tableData"    style="width: 100%"  >    <el-table-column      prop="date"      label="日期"      width="180"    />    <el-table-column      prop="name"      label="姓名"      width="180"    />    <el-table-column      prop="address"      label="地址"    />  </el-table></template><script>    export default {        data() {            return {                loading: false,                tableData: []            };        },        mounted() {            // 模仿申请耗时2s            let that = this;            that.loading = true;            setTimeout(function () {                that.loading = false;                that.tableData = [{                    date: '2016-05-02',                    name: '王小虎',                    address: '上海市普陀区金沙江路 1518 弄'                }, {                    date: '2016-05-04',                    name: '王小虎',                    address: '上海市普陀区金沙江路 1517 弄'                }, {                    date: '2016-05-01',                    name: '王小虎',                    address: '上海市普陀区金沙江路 1519 弄'                }, {                    date: '2016-05-03',                    name: '王小虎',                    address: '上海市普陀区金沙江路 1516 弄'                }];            }, 2000);        }    };</script>