需求：
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 checNodes = this.$refs.orgtxtree.getCheckedNodes();
let keyArrList = this.$refs.orgtxtree.getCheckedKeys();
// 删除节点
for(let i = 0; i < checNodes.length; i++){
if(checNodes[i].nodeName == val){
if(checNodes[i].childrenList.length > 0){
keyArrList.splice(i,1)
this.del(checNodes[i].childrenList,keyArrList)
}else{
checNodes.splice(i, 1);
this.$refs.orgtxtree.setCheckedNodes(checNodes);
}
break;
}
}
// 设置 tree 选中的节点
},
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)
})
},
//select清空时代码实现
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.$nextTick(()=>{
if(this.$refs.ruleForm){
let checkedList = this.$refs.orgtxtree.getCheckedNodes();
checkedList.forEach((item,index)=>{
this.$set(item,'checked',true);
this.$set(this.selectTree,index,{id:item.id,label:item.nodeName})
})
this.$refs.orgtxtree.setCheckedKeys(this.ruleForm.checkList);
}
});
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:[]
}]
}]
}
]
实现效果图：
标签：node,el,nodeName,--,refs,ruleForm,联动,id From： https://www.cnblogs.com/zhu-xl/p/17025093.html