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

相信很多人在使用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 = "暂无数据";          }        }      });    }

标签：el,暂无,tree,tableData,element,数据,dataText
来源： https://www.cnblogs.com/webdom/p/16088011.html