共计 2882 个字符，预计需要花费 8 分钟才能阅读完成。
简介
设置 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>
原文地址: el-tree 懒加载数据改变后不能实时刷新问题
正文完
