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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

<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>

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