vue+element 表格el-table显示数据加载中

最新推荐文章于 2024-05-15 16:34:47 发布

Apeng_0919

最新推荐文章于 2024-05-15 16:34:47 发布

阅读量4.7k

点赞数

分类专栏： vue element 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_50606255/article/details/117465546

版权

vue 同时被 2 个专栏收录

36 篇文章 2 订阅

订阅专栏

element

9 篇文章 0 订阅

订阅专栏

查看element官网上表格的属性，有一个empty-text的属性，官网介绍如下：

1.在el-table添加empty-text属性

<el-table :data="assetsDetails" style="width: 100%" :empty-text="loadInfo">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="sex" label="性别"> </el-table-column>
    <el-table-column prop="grade" label="成绩"></el-table-column>
</el-table>

2.定义显示数据loadInfo

3.在表格数据内容加载时，设置显示数据的内容，数据加载完毕时将显示数据设置为空；

getWalletDetails(val) {
      this.assetsDetails = [];
      this.loadInfo = '数据加载中...';
      this.dialogVisible = true;
      getWalletDetails(val)
        .then((res) => {
          const code = res.data.code;
          this.loadInfo = '';
          if (code === 200) {
            this.assetsDetails = res.data.data.symbolAssets;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

如有问题，欢迎留言！！