问题
二次封装了一个 el-tree
组件 MenuTree
,想要在树形数据 nodeData
传递之前,树显示为 loading加载中 的状态。
原代码是在 MenuTree
中监听 nodeData
,data
中声明 treeLoading
为 true
,一旦树形数据的数据加载完毕就把 treeLoading
置为 false
。
这样产生的问题是:如果树形数据本身为空数组,则树就会一直加载。
改进:监听树形数据的时候,当它为空时,也把 treeLoading
置为 false
。
这样又导致了一个问题:nodeData
初始默认为空数组,过一会儿才会显示请求返回的树形数据。即页面效果为:刚开始为 暂无数据
,过几秒钟后页面才显示树。这样违背了初始加载状态的设计初衷。
解决
v-loading
的设计目的是在数据加载之前为 true
, 加载完毕后为 false
。
因此,它针对的是树形数据,即把树形数据赋值给 nodeData
时就要设置 loading,不需要在 MenuTree
中监听 nodeData
。
代码
给组件 MenuTree
的 el-tree
设置 v-loading="treeLoading"
组件 MenuTree props
// props 接收
// 树形加载状态
treeLoading: {
type: Boolean,
default: true
}
使用时,把 treeLoading
也要传过去: