<el-select
:value="query.testProjectId"
placeholder="请选择目录"
style="width:100%"
clearable
ref='selectTree1'
filterable
@clear="clearHandle"
:filter-method="filterNode"
@focus="refreshFilterNode()"
>
<el-option id='selectTree' :value="query.testProjectId" :label='query.name' class="options">
<el-tree
id="tree-option"
ref="selectTree"
:filter-node-method="filterNodeProject"
:data="projectTreeName?caseData:[]"
:props="caseprops"
:load="loadNode"
lazy
:highlight-current='true'
@node-click="handleNodeClick"
node-key='id'
>
</el-tree>
</el-option>
</el-select>
调用方法
//过滤数据
filterNode(value){
this.$refs.selectTree.filter(value);
},
refreshFilterNode(){
this.filterNode(this.query.name)
},
filterNodeProject(value, data) {
if (!value) return true;
if(this.node_had&&this.node_had.level>=1){
this.refreshNodeBy(this.node_had.data.id)
}
return data[this.props.label].indexOf(value) !== -1;
},
//清空
clearHandle(){
this.query.testProjectId = ''
this.query.name = ''
this.$refs.selectTree.setCurrentKey();//清空选中效果
this.$refs.selectTree.store._getAllNodes().forEach((v,i)=>{//收起树结构
this.$refs.selectTree.store._getAllNodes()[i].expanded = false;
})
this.filterNode('');
},
// 切换选项
handleNodeClick(node,data){
this.query.testProjectId = node.testProjectId
this.query.name = node.name
this.nodeId = node.id
this.query.level=node.level;
this.node_had = data;
},
//展开过的节点再次查询点击没无数据
requestNewData() {
// this.node_had.childNodes = [];//把存起来的node的子节点清空,不然会界面会出现重复树!
this.loadNode(this.node_had, this.node_had.level>=1?
this.resolve_had2:this.resolve_had);//再次执行懒加载的方法
},
refreshNodeBy(id){
this.node_had.childNodes = [];//把存起来的node的子节点清空,不然会界面会出现重复树!
let node = this.$refs.selectTree.getNode(id)// 通过节点id找到对应树节点对象
node.loaded = false
node.expand() // 主动调用展开节点方法,重新查询该节点下的所有子节点
},
//懒加载树结构
async loadNode(node, resolve) {
if(!node){
//调用接口
if(res){
if(res.data.head.result==0){
if(res.data.body.tradeFlowFolder){
this.caseData = res.data.body.tradeFlowFolder
}else{
}
}
}else{
this.$message.error(res.data.head.message);
}
}
// if(node.level === 0) {
// return
// }
else{
//调用接口
if(res){
if(res.data.head.result==0){
if(res.data.body.tradeFlowFolder){
return resolve(res.data.body.tradeFlowFolder);
}else{
return resolve([]);
}
}
}else{
this.$message.error(res.data.head.message);
}
}
},