在使用element el-tree和el-table组件时，如何避免加载数据前出现暂无数据的短暂闪烁？

本文共计431个文字，预计阅读时间需要2分钟。

在Element UI中使用el-tree和el-table组件加载数据前，会默认显示+暂无数据+提示，用户体验不佳。处理方法是：在el-tree组件上添加属性！--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 = "暂无数据"; } } }); }

　　

不忘初心，勇闯自由互联，欢迎大家留言交流技术，记得关注我哦！