猿来是你三十而立,砥砺前行,不忘初心,勇闯猿类

element el-tree、el-table组件加载数据前闪现 暂无数据 清除

相信很多人在使用element  el-tree、el-table组件加载数据前会显示一个“ 暂无数据 ”,体验很不友好,有没有办法处理不显示呢?答案是:有的。废话不多说直接上代码解说:

<!--el-tree "暂无数据" 不显示处理-->

<template> <el-tree :empty-text="emptyText" :expand-on-click-node="false" :props="defaultProps" :load="loadNode" node-key="id" lazy> <div class="custom-tree-node" slot-scope="{ node, data }"> <!--节点渲染--> </div> </el-tree> </template> <script> export default { data() { return { emptyText:"", } },
  

//* 利用el-tree 自带的empty-text属性绑定一个初始化空值,当拿到tree数据时判断数据长度,当数据长度为0时设置emptyText值为"暂无数据"即可 </script>
<!--el-table "暂无数据" 不显示处理-->
<template>
     <el-table :data="tableData" style="width: 100%">
       <template slot="empty">
         <p>{{dataText}}</p>
       </template>
       <el-table-column prop="date" label="日期" width="180"></el-table-column>
       <el-table-column prop="name" label="姓名" width="180"></el-table-column>
       <el-table-column prop="address" label="地址"></el-table-column>
     </el-table>
   </template>
 
 
data() {
   return {
     tableData: [],
     dataText: "" //进去页面先让字样为空
   };
 },
 
//请求数据
   goodsList() {
     //先将变量清空
     this.dataText = "";
     this.$request(
       this.$config.baseApi + "/user/address/inde", "get"  ).then(res => {
       if (res.code === 200) {
         this.tableData = res.data.content;
         //   当请求后台,数据为空时,再让页面显示暂无数据
         if (this.tableData.length === 0) {
           this.dataText = "暂无数据";
         }
       }
     });
   }

  

posted @ 2022-04-01 18:03  青瑟少年  阅读(3098)  评论(0编辑  收藏  举报