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

转自www.shuzhiduo.com/A/6pdDnX9lJ…

• el-tree "暂无数据" 不显示处理：

<el-tree ref="tree" :empty-text="emptyText" :data="listone" node-key="id" :props="defaultProps" @node-click="selectTree" />

data() {
    return {
      emptyText: '',
  }
 },

//* 利用el-tree 自带的empty-text属性绑定一个初始化空值，当拿到tree数据时判断数据长度，当数据长度为0时设置emptyText值为"暂无数据"即可

• 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 = "暂无数据";
            }
        }
    });
 }