elementui的表格正确使用骨架屏vue-elementui-skeleton

最新推荐文章于 2024-07-25 14:07:12 发布

浪迹天涯之小king

最新推荐文章于 2024-07-25 14:07:12 发布

阅读量2k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_44953151/article/details/127021251

版权

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>