element ui --el-select 嵌套el-tree多选联动、删除联动
需求：
el-select 下拉框嵌套el-tree 树形组件 完成多选、删除、搜索、清空选项等联动功能。
特殊需求：（当子节点全部选中时el-select中只展示父节点tag,el-tree组件父子节点全部选中，当el-select中父节点tag删除时，el-tree中父子节点的选中状态全部清除）
代码实现：
页面部分：
<el-form-item label="适用范围：" prop="selectList" :rules="[{required:true,message: '适用范围不能为空'}]">
<el-select
class="el-input-search"
v-model="ruleForm.selectList"
ref="orgtxSelect"
:multiple="true"
@remove-tag="removetag"
@clear="clearall"
clearable
@change ="$forceUpdate();"
style="width:300px" >
<el-option
disabled
value=""
style="height:auto;background-color: #fff;"
class="noDisabledCursor">
<el-input
:validate-event="false"
v-model="filterText"
placeholder="请输入"
@click.stop.native
style="margin-bottom:8px;"></el-input>
<el-tree
:data="orgList"
show-checkbox
default-expand-all
highlight-current
:expand-on-click-node="false"
:check-on-click-node="true"
:props="defaultProps"
node-key="id"
@check="handleNodeCheck"
@node-click="handleNodeClick"
:filter-node-method="filterNode"
class="dialogTree"
ref="orgtxtree"
></el-tree>
</el-option>
</el-select>
</el-form-item>
methods代码实现：
//点击树形元素或者复选框时方法实现 handleNodeClick(data,node){ this.selectTree= []; this.ruleForm.selectList = []; let datalist = this.$refs.orgtxtree.getCheckedNodes(); let keyArrList = this.$refs.orgtxtree.getCheckedKeys(); for(let i = 0;i < datalist.length;i++){ if(datalist[i].level == 1){ this.selectTree.push({id:datalist[i].id,label:datalist[i].nodeName}) this.ruleForm.selectList.push(datalist[i].nodeName); break; }else{ if(keyArrList.indexOf(Number(datalist[i].parentId)) == -1){ this.selectTree.push({id:datalist[i].id,label:datalist[i].nodeName}) this.ruleForm.selectList.push(datalist[i].nodeName); } } } }, handleNodeCheck(data,node){ this.selectTree= []; this.ruleForm.selectList = []; for(let i =0;i< node.checkedNodes.length;i++){ console.log(node.checkedNodes[i]) if(node.checkedNodes[i].level == 1){ this.selectTree.push({id:node.checkedNodes[i].id,label:node.checkedNodes[i].nodeName}) this.ruleForm.selectList.push(node.checkedNodes[i].nodeName); break; }else{ if(node.checkedKeys.indexOf(Number(node.checkedNodes[i].parentId)) == -1){ this.selectTree.push({id:node.checkedNodes[i].id,label:node.checkedNodes[i].nodeName}) this.ruleForm.selectList.push(node.checkedNodes[i].nodeName); } } } },
//点击select中删除按钮方法实现
removetag(val){
let checkNodes = this.$refs.orgtxtree.getCheckedNodes();
let keyArrList = this.$refs.orgtxtree.getCheckedKeys();
let selectList = this.selectTree.map(x=>x.label);
for(let i = 0; i < checkNodes.length; i++){
if(checkNodes[i].nodeName == val){
if(checkNodes[i].childrenList.length > 0){
keyArrList.splice(i,1);
this.selectTree.splice(selectList.indexOf(val),1);
this.del(checkNodes[i].childrenList,keyArrList);
}else{
checkNodes.splice(i, 1);
this.selectTree.splice(selectList.indexOf(val),1);
this.$refs.orgtxtree.setCheckedNodes(checkNodes);
}
break;
}
}
},
// 递归删除树组件选中状态
del(arr,dataList) {
for (let item of arr) {
if(item.childrenList.length > 0 ) {
this.del(item.childrenList);
}else{
dataList.splice(dataList.indexOf(Number(item.id)),1)
}
}
this.$nextTick(() => {
this.$refs.orgtxtree.setCheckedKeys(dataList)
})
},
clearall(){
this.selectTree = []
this.$nextTick(() => {
this.$refs.orgtxtree.setCheckedNodes([])
})
},
输入框搜索代码实现（watch监听filterText）：
watch:{ infoData:{ handler(val){ this.ruleForm = val; this.$set(this.ruleForm,'selectList',this.ruleForm.nodeNameList)
this.$refs.orgtxtree.setCheckedKeys(this.ruleForm.checkList); this.$nextTick(()=>{
if(this.$refs.ruleForm){
let checkedList = this.$refs.orgtxtree.getCheckedNodes();
let keyArrList = this.ruleForm.checkList;
this.selectTree = [];
for(let i = 0;i < checkedList.length;i++){
if(checkedList[i].level == 1){
this.selectTree.push({id:checkedList[i].id,label:checkedList[i].nodeName})
break;
}else{
if(keyArrList.indexOf(Number(checkedList[i].parentId)) == -1){
this.selectTree.push({id:checkedList[i].id,label:checkedList[i].nodeName})
}
}
}
}
}); this.$nextTick(()=>{ this.$refs.ruleForm.clearValidate();//清空表单 }) } }, // 监听输入值 filterText(val) { this.$refs.orgtxtree.filter(val); } },
在mathods中过滤输入搜索值：
filterNode(value, data) { if (!value) return true; return data.nodeName.indexOf(value) !== -1; },
数据结构：
orgList:[ { id:11, leavel:1, nodeId:'k01', nodeName:'这是第一级', parentId:'', childrenList:[{ id:101, leavel:2, nodeId:'k0101', nodeName:'这是第二级', parentId:'11', childrenList:[{ id:10101, leavel:3, nodeId:'k010101', nodeName:'这是第三级', parentId:'101', childrenList:[] }] },{ id:201, leavel:2, nodeId:'k0102', nodeName:'这是第二级', parentId:'11', childrenList:[{ id:10102, leavel:3, nodeId:'k010102', nodeName:'这是第三级', parentId:'201', childrenList:[] }] }] } ]
实现效果图：
最后：提交给接口入参 直接用 (this.selectTree.map(x=>x.id).filter(k=>k!= null)).join(',') 获取当前选中父节点或半选中子节点所组成的id 并转换成字符串
