elementUI选择框、树----将select与tree配合做出级联Cascader的效果

封装代码

<template>
    <div :style="{
    '--treeWidth':treeWidth,
    }">
     <!-- @change="selectChange" -->
    <el-select v-model="mineStatus" placeholder="请选择" @change="selectChange" multiple collapse-tags >
        <el-option  :value="mineStatusValue" style="height: auto">
            <!-- //option展开高度太小，把height设置为auto就好啦 -->
            <el-checkbox v-model="checked" class="checked">包含下属单位数据</el-checkbox>
            <el-tree
            :v-loading="treeLoading"
            :data="orgTreeData"
            :props="{ children: 'children' ,value: 'orgId',label: 'orgName'}"
            :show-checkbox="true"
            :default-expand-all="defaultExpandAll"
            node-key="orgId"
            ref="tree"
            @check-change="nodeChange"
            :check-strictly="!checked"
            :highlight-current="true">
            </el-tree>
        </el-option>
    </el-select>
    </div>
</template>
<script>
export default {
    props:{
        //树形数据
        orgTreeData:{
            type:Array,
            require:true,
            default:()=>{
                return []
            }
        },
        //是否包含下属层级
        checked:{
            type:Boolean,
            default:false,
        },
        //加载动画
        treeLoading:{
            type:Boolean,
            default:false
        },
        //默认展开
        defaultExpandAll:{
            type:Boolean,
            default:false
        },
        //下拉框宽度
        treeWidth:{
            default:'10rem'
        },
    },
    data(){return{mineStatus:[],mineStatusValue:[]}},
    methods:{
        nodeChange(){
            let selectArr = [];
            let treeArr = this.$refs.tree.getCheckedNodes();
            console.log(treeArr)
            let mineStatus=[]
            treeArr.map((item,index)=>{
                let arr = [item.orgId]
                selectArr.push(arr)
                mineStatus.push(item.orgName)
            })
            this.mineStatus=mineStatus
            console.log(this.mineStatus)
            console.log(selectArr)
            this.$emit('nodeChange',selectArr)
        },
        selectChange(e){
            console.log(e)  
            // var arrNew = [];
            // console.log(this.mineStatusValue)
            // var dataLength = this.mineStatusValue.length;
            // var eleng = e.length;
            // for(let i = 0; i< dataLength ;i++){
            //     for(let j = 0; j < eleng; j++){
            //         if(e[j] === this.mineStatusValue[i].label){
            //             arrNew.push(this.mineStatusValue[i])
            //         }
            //     }
            // }
            // console.log(arrNew)
            // this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
            if(e.length != this.mineStatus.length){
                this.$refs.tree.setCheckedNodes([]);
            }
            
        },
    }
}
</script>
<style scoped lang="scss">
// /deep/.el-tree-node__children{
//     height: 10rem !important;
//     overflow-y: auto !important;
//     border: 1px solid gainsboro !important;
//     border-radius: 5px !important;
// }
.el-tree::v-deep{
    .el-tree-node{
        // background-color: red;
        .el-tree-node__children{
            height: var(--treeWidth) !important;
            // overflow-y: auto !important;
            // border: 1px solid gainsboro !important;
            // border-radius: 5px !important;
        }
        .el-tree-node__content{
            // width: 10rem;
        }
    }
}
.checked{
    font-size:12px;color:#606266;margin-left:1.4rem;
}
</style>

使用代码

<tree-component 
v-show="orgTreeData.length>0" 
:orgTreeData="orgTreeData" 
@nodeChange="nodeChange" 
:checked="checked" 
:v-loading="treeLoading">
</tree-component>