<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 节点哈哈哈 具体逻辑我这菜鸟就不贴代码了