简介
设置lazy后，加载数据通过load获取，如果外部搜索条件改变，数据源变动后，el-tree仍然是老数据不更新最新数据，因为el-tree加载后会缓存，需要主动设置data去更新最新数据
效果
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
<title>el-tree懒加载数据改变后不能实时刷新问题</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css">
<style>
/* 页面所需样式 */
html,
body,
#app {
width: 100%;
margin:0;
padding: 0;
}
.cardBox {
width: 50%;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
margin: 0 auto;
}
.tree{
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body style="background: #eee;">
<div id="app" class="pt10">
<div class="cardBox pl10 pr10 pt15 pb15 borBox bgf ml12 mr12 mb12 fz16">
<p>设置lazy后，加载数据通过load获取，如果外部搜索条件改变，数据源变动后，el-tree仍然是老数据不更新最新数据，因为el-tree加载后会缓存，需要主动设置data去更新最新数据</p>
<el-radio-group v-model="radio" @change="radioChange">
<el-radio-button label="shanghai">上海</el-radio-button>
<el-radio-button label="beijing">北京</el-radio-button>
</el-radio-group>
<el-tree class="tree" :load="loadNode" :data="treeData" lazy :props="defaultProps" node-key="name">
<div slot-scope="{ node, data }" >
<span>{{ node.label }}</span>
<el-popconfirm title="确定下载吗？" @confirm="downFile(node, data)">
<el-button type="text" slot="reference" icon='el-icon-download'></el-button>
</el-popconfirm>
</div>
</el-tree>
</div>
</div>
</body>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
radio:'shanghai',
defaultProps: {
label: 'name',
children: 'children',
isLeaf: 'leaf'
},
treeData:[],
allCity:{
shanghai:[
{
name: '浦东新区',
path: '/pudong',
leaf: false,
children:[
{
name: '张江',
path: '/zhangjiang',
leaf: true
},
{
name: '周浦',
path: '/zhoupu',
leaf: true
},
{
name: '南汇',
path: '/nanhui',
leaf: true
},
]
},
{
name: '临港新区',
path: '/pudong',
leaf: false,
children:[
{
name: '滴水湖',
path: '/dishuihu',
leaf: true
},
{
name: '海事大学',
path: '/haishi',
leaf: true
},
{
name: '海洋大学',
path: '/haiyang',
leaf: true
},
]
}
],
beijing:[
{
name: '雄安新区',
path: '/xiongan',
leaf: false,
children:[
{
name: '雄安一区',
path: '/xyi',
leaf: true
},
{
name: '雄安二区',
path: '/xer',
leaf: true
},
{
name: '雄安三区',
path: '/xsan',
leaf: true
},
]
},
{
name: '朝阳区',
path: '/chaoyang',
leaf: false,
children:[
{
name: '朝阳一区',
path: '/cyi',
leaf: true
},
{
name: '朝阳二区',
path: '/cer',
leaf: true
},
{
name: '朝阳三区',
path: '/csan',
leaf: true
},
]
}
]
}
}
},
created() {
// 模拟点击改变搜索条件，请求接口，拿到新数据
setTimeout(() => {
this.treeData = this.allCity[this.radio]
} ,300)
},
mounted() {
},
methods: {
// 条件切换
radioChange(){
// 模拟点击改变搜索条件，请求接口，拿到新数据
setTimeout(() => {
this.treeData = this.allCity[this.radio]
} ,300)
},
// 动态加载
loadNode(node, resolve) {
if (node.level === 0) {
resolve(this.treeData)
}else{
// 打开子目录
if(node.data.path){
// 模拟请求接口获取子集数据
setTimeout(() => {
resolve(node.data.children)
} ,300)
}
}
},
// 下载文件
downFile(node, data){
window.location.href = `http://www.baidu.com/${encodeURIComponent(data.path)}`
},
}
})
</script>
</html>
