表格加载数据时，显示loading样式，并隐藏暂无数据字样

最新推荐文章于 2025-04-12 19:49:55 发布

qq_46167326

最新推荐文章于 2025-04-12 19:49:55 发布

阅读量1.3k

点赞数

文章标签：数学建模

本文链接：https://blog.youkuaiyun.com/qq_46167326/article/details/130901985

版权

该文章展示了如何在Vue.js应用中使用<el-table>组件处理表格数据为空的情况。当数据加载时，会显示加载动画，而如果没有数据，则显示暂无数据的提示。这通过dataLoading和dataText两个数据属性以及template插槽来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先把表格为空时的数据设为空字符串，

<el-table v-loading='dataLoading.visible'>
  <el-table-column>
    <template slot="empty">
      <p>{{ dataText }}</p>
    </template>
  </el-table-column>
</el-table>
<script>
export default {
    data() {
        return {
            dataLoading： {
              visible: false
            }
            dataText: ''
        }
    },
    methods: {
    loadTableData() {
        // 先显示加载样式 
        this.dataLoading.visible = true
        ...
        if (如果表格没有数据) {
            // 则显示暂无数据字样
            this.dataText = '暂无数据'
        }
    }
}
</script>