<el-tree>懒加载 省市区

615 阅读1分钟

<el-tree        
class="filter-tree"        
ref="tree"        
lazy        
accordion        
show-checkbox        
:load="loadNode"        
:props="defaultProps"        
:filter-node-method="filterNode"        
node-key="code"        
highlight-current        
:default-checked-keys="isChecked"      ></el-tree>

需求:设置邮费,不能重复选择地区,如图:


遇到的问题

1.树懒加载 属性:lazy 

// 异步树叶子节点懒加载逻辑
async loadNode(node, resolve) {
// isFirst 为了保证只在第一次加载的时候进行
if (this.isFirst) {
this.tmpResolvephoto = resolve;
this.node = node;
this.isFirst = false
}
// 一级节点处理
if (node.level === 0) {
await this.requestTree(resolve);
}// 其余节点处理
if (node.level >= 1) {
this.getIndex(node, resolve);
}
},

2.多选成全选和直接全选 判断 如图


allChecked(data){      
data.map((item,index) => {
     //整合数据 //点个凑成全选            
    if(item.checked && item.childNodes.length > 0){
        data = data.filter(childitem => childitem.data.parentCode != item.data.code)              
        return false;            
   }     
});      
return data;    
},

3.禁用已选数据

使用this.$set

this.$set(item, 'disabled', true);

4.保存数据

可以直接获取node 节点

let arrNew = this.$refs.tree.getCheckedNodes();//获取全部选中的节点
let curNode = this.$refs.tree.getNode(data);//获取node 节点

哈哈哈   具体逻辑我这菜鸟就不贴代码了