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:[]
                        }]
                    }]
                }
            ]