三级弹框案例并配合elementUI中的el-select使用

ゝ一纸荒年。 2023-03-06 05:09 116阅读 0赞

三级弹框案例并配合elementUI中的el-select使用  
说明：本案例贴出了95%代码，弹框的案例代码是完整的，只是传来的list数据需要修改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

点击输入框中的叉号 如同上图页面中的删除（叉号）  
![在这里插入图片描述][20200805130153757.png]

三级弹框代码如下：

<template>
        <div class="zw-dialog">
            <div class="zw-top">
                <p class="zw-word">请选择专业</p>
                <div class="zw-in">
                    
                    <el-input  class="in-put" v-model="jobKeyWord"
                               @click.native="clickSearchInput"
                               clearable
                               @blur="blurSearch"
                               placeholder="请输入职位关键词"></el-input>
                    <div class="in-block" v-show="searchFlag">
                        <ul class="in-ul">
                            
                            <li class="in-li" v-for="(item,i) in searchList"
                                :key="i" @click="clickTwoCatFun(item)"
                                @mousedown= downDrag($event)
                                v-html="item.nameVal"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="zw-middle">
                <div class="mid-choose">
                    <span class="zw-tag" v-for="(item,i) in clickTwoNameArr" :key="i">
                         {
       {item.specialtyName}}
                     <i class="el-icon-close" @click="delChoolseTwoItem(item)"></i>
                    </span>
                    <span class="zw-more">最多选择10个专业</span>
                </div>
               
                <span class="zw-sure" @click="jobSure">确认</span>
            </div>
            <div class="zw-main">
                <div class="zw-left">
                    <ul class="zw-ul">
                        
                        
                        <li class="zw-li"
                            :class="[clickOneJobNameArr.includes(item.disciplineCode) ? 'li-active' :'']"
                            v-for="(item,i) in jobClassList"
                            @click="clickJobItem(item)"
                            :key="i" >{
       {item.disciplineName}}
                            <span class="li-num" v-if=" countObj[item.disciplineCode] ">{
       {countObj[item.disciplineCode]}}</span>
                        </li>
                    </ul>
                </div>
                <div class="zw-right">
                    <div class="right-main">
                        
                       
                        <div class="rm-block"
                             v-for="(twoObj,i) in clickCateObj.class"
                             :key="i">
                            
                            <p class="rm-two-title">{
       {twoObj.className}}</p>
                            <div class="rm-three-block" >
                                <span class="th-word"
                                      v-for="(threeObj,i) in twoObj.specialties"
                                      :class="[clickTwoIdArr.includes(threeObj.specialtyCode) ? 'job-active' :'']"
                                      @click="clickTwoCatFun(threeObj)"
                                      :key="i">{
       {threeObj.specialtyName}}</span>
    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "ThreeClassComp",
            data(){
                return{
                    jobKeyWord:'',//职位关键词
                    searchFlag:false,//是否展示搜索框
                    searchList:[],//搜索数据
                    clickOneJobNameArr:[],//存储点击时一级分类
                    clickTwoNameArr:[],//选中的二级分类
                    clickTwoIdArr:[],//选中的二级分类
                    clickCateObj:{},// 点击选中的一级分类
                    countObj:{},//二级职位被选中时 一级显示数量
                    searchDataList:[], //搜索数据
                    allTwoClassList:[],//所有二级分类
                }
            },
            props:{
                form: Object,
                isEndDateNow: Boolean,
                jobClassList:{
                    type:Array,
                    default() {
                        return [];
                    }
                },
                threeMajorList:{
                    type:Array,
                    default() {
                        return [];
                    }
                }
            },
            computed: {
                listLength(){
                    return this.jobClassList.length
                }
            },
            watch:{
                jobKeyWord(val){
                    if(val.length >0){
                        this.searchList = this.searchDataList.filter(item =>{
                            val = val.toUpperCase();
                            let reg = new RegExp("(" + val + ")", "g");
                            let nameVal = item.specialtyName.replace(reg, "<span style='color:#437FFF;'>$1</span>");
                            item.nameVal = nameVal;
                            //     return newstr;
                            return item.specialtyName.includes(val)
                        })
                        this.searchFlag = true
                    }else {
                        this.searchList = [];
                        this.searchFlag = false
                    }
    
                },
                listLength(val,oldValue){
                    /*  console.log("val==",val)
                      console.log("oldValue==",oldValue)*/
                    if(oldValue === 0 && val >0){
                        //console.log("--22--",this.jobClassList)
                        this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].disciplineCode ): '';
                        Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
                        this.dealSearchData(); // 处理搜索职位数据
                      //  this.doAllTwoClassData() lzs
                    }
                }
            },
            created() {
                if(this.jobClassList && this.jobClassList.length >0){
                    this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].disciplineCode ): '';
                    Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
                    this.dealSearchData(); // 处理搜索职位数据
                }
            },
            mounted() {
                this.dealInitJobData();
            },
            methods:{
                dealInitJobData(){
                    // console.log("hhhhhhhhhhhhhh====",this.form.twoItem)
                    if(this.form.threeItem.length>0){
                        this.form.threeItem.forEach(id =>{
                            if(this.threeMajorList && this.threeMajorList.length>0){
                               let fidObj = this.threeMajorList.find(item=>{
                                    return item.specialtyCode == id
                                })
    
                                if(fidObj){
                                    this.clickTwoNameArr.push(fidObj)
                                    this.clickTwoIdArr.push(fidObj.specialtyCode)
                                    if(!this.countObj[fidObj.grandFatherId]){
                                        this.countObj[fidObj.grandFatherId] = 1
                                    }else {
                                        this.countObj[fidObj.grandFatherId]++;
                                    }
                                }
                            }
                            /*this.clickTwoNameArr.push(obj)
                            this.clickTwoIdArr.push(obj.id)
                            if(!this.countObj[obj.parentId]){
                                this.countObj[obj.parentId] = 1
                            }else {
                                this.countObj[obj.parentId]++;
                            }*/
                        })
                    }
                },
                clickSearchInput(){
                    this.jobKeyWord.length > 0 ? this.searchFlag = true : this.searchFlag=false;
                },
                //input失去焦点
                blurSearch(){
                    this.searchFlag = false;
                },
                downDrag(el){
                    el.preventDefault();//阻止input失去焦点事件时的影响
                },
                //职位确认
                jobSure(){
                   // this.dialogVisible = false; //add lzs
                    if(this.clickTwoNameArr.length >0){
                        this.form.jobIntensionName = '';
                        this.clickTwoNameArr.forEach(item =>{
                            this.form.jobIntensionName = this.form.jobIntensionName + '，' + item.specialtyName ;
                        })
                        this.form.jobIntensionName.length > 0 ? this.form.jobIntensionName = this.form.jobIntensionName.substring(1,this.form.jobIntensionName.length) :'';
                    }else {
                        this.form.jobIntensionName = '';
                    }
                    this.$emit('sureMajorMethod',this.clickTwoNameArr)
                },
                clickJobItem(item){//点击职位类别
                    this.clickCateObj =item;
                    //处理选中 颜色变化
                    if(this.clickOneJobNameArr.length >0){
                        this.clickOneJobNameArr.splice(0, 1);
                        this.clickOneJobNameArr.push(item.disciplineCode)
                    }else{
                        this.clickOneJobNameArr.push(item.disciplineCode)
                    }
                },
                //点击二级职位名称
                clickTwoCatFun(obj){
                    //type: search two; =search是点击的搜索框出现，否则就是点击的二级
                    // type === 'search' ? this.jobKeyWord = obj.nameZh : '';
                    if(!this.clickTwoIdArr.includes(obj.specialtyCode) && this.clickTwoIdArr.length ===10 ){
                        this.$message({
                            message: '最多选择10个专业哦',
                            type: 'warning'
                        });
                        return
                    }
                    if(!this.clickTwoIdArr.includes(obj.specialtyCode) && this.clickTwoIdArr.length<10){
                        this.clickTwoNameArr.push(obj)
                        this.clickTwoIdArr.push(obj.specialtyCode)
                        this.form.jobIntensionNameSel.push(obj.specialtyCode)
                        if(!this.countObj[obj.grandFatherId]){
                            this.countObj[obj.grandFatherId] = 1
                        }else {
                            this.countObj[obj.grandFatherId]++;
                        }
                    }
                },
                //要删除的二级分类,改变选中颜色，改变一级分类统计数量
                delChoolseTwoItem(delObj){
                    // var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });
                    let index = this.clickTwoNameArr.findIndex(item =>{
                        return item.specialtyCode === delObj.specialtyCode
                    })
                    let formIndex = this.form.jobIntensionNameSel.findIndex(idVal =>{
                        return idVal === delObj.specialtyCode
                    })
                    this.form.jobIntensionNameSel.splice(formIndex, 1)//删除
                    this.clickTwoNameArr.splice(index, 1)
                    this.clickTwoIdArr.splice(index, 1)
                    if(!this.countObj[delObj.grandFatherId]){
                        this.countObj[delObj.grandFatherId] = 0
                    }else {
                        this.countObj[delObj.grandFatherId]--;
                    }
                },
                //处理搜索的数据
                dealSearchData(){
                    this.searchDataList = this.threeMajorList;
                    /*this.jobClassList.forEach(item =>{
                        this.searchDataList = this.searchDataList.concat(item.list)
                    })*/
                },
                removeTags(val){
                    let delObj = this.clickTwoNameArr.find(item =>{
                       return item.specialtyCode === val
                   })
    
                  let index = this.clickTwoNameArr.findIndex(item =>{
                       return item.specialtyCode === val
                   })
                   this.clickTwoNameArr.splice(index, 1)
                   this.clickTwoIdArr.splice(index, 1)
    
                   // this.clickTwoNameArr
                   if(!this.countObj[delObj.grandFatherId]){
                       this.countObj[delObj.grandFatherId] = 0
                   }else {
                       this.countObj[delObj.grandFatherId]--;
                   }
                }
            }
        }
    </script>
    
    <style scoped lang="less">
        .zw-dialog{
            /*  border: 1px solid red;*/
            width:880px;
            height:550px;
            background:rgba(255,255,255,1);
    
            .zw-top{
                height: 52px;
                width: 100%;
                display: flex;
                /*border: 1px solid green;*/
                border-bottom: 1px solid #EFEFEF ;
                .zw-word{
                    width: 200px;
                    /* text-align: center;*/
                    margin-left: 30px;
                    line-height: 52px;
                    font-size: 16px;
                    color: #333333;
                }
                .zw-in{
                    /* border: 1px solid blue;*/
                    width: calc(100% - 200px);
                    line-height: 52px;
                    .zw-put{
                        border-radius:15px;
                        border:1px solid rgba(224,224,224,1);
                        width: 200px;
                        height: 30px;
                        margin-left: 32px;
                        font-size: 12px;
                        padding-left: 20px;
                    }
                    .in-put{
                        width: 200px;
                        height: 30px;
                        /deep/ .el-input__inner{
                            border-radius:15px;
                            color: #999999;
                            font-size: 12px;
                        }
                        /deep/ input::-webkit-input-placeholder {
                            /* WebKit browsers */
                            font-size: 12px;
                            color: #999999;
                        }
                        /deep/ input:-moz-placeholder{
                            /* Mozilla Firefox 4 to 18 */
                            font-size: 12px;
                            color: #999999;
                        }
                        /deep/ input::-moz-placeholder{
                            /* Mozilla Firefox 19+ */
                            font-size: 12px;
                            color: #999999;
                        }
                        /deep/ input:-ms-input-placeholder{
                            font-size: 12px;
                            color: #999999;
                        }
                    }
                    .in-block{
                        width: 200px;
                        height: 290px;
                        z-index: 11;
                        box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
                        position: relative;
                        background: #ffffff;
                        overflow: scroll;
    
                        .in-ul{
                            padding:5px 0px;
                            .in-li{
                                color: #000000;
                                padding: 10px 20px;
                                line-height: 20px;
                                font-size: 14px;
                                &:hover{
                                    cursor: pointer;
                                    background: #F7F9FD;
                                }
    
                            }
                        }
                    }
    
    
                }
            }
            .zw-middle{
               /* width: 100%;*/
               /* height: 50px;*/
                /*  border: 1px solid green;*/
                display: flex;
                min-height: 50px;
               /* margin: 10px 0;*/
                align-items: center;
                padding-left: 30px;
                .mid-choose{
                    width: 70%;
                    .zw-tag{
                        display: inline-block;
                        border-radius:15px;
                        border:1px solid rgba(67,127,255,1);
                        padding: 5px 12px 5px 10px;
                        margin-right: 16px;
                        font-size:13px;
                        color: #437FFF;
                        margin: 10px 5px;
    
                        i{
                            cursor: pointer;
                            padding-left: 4px;
                        }
                    }
                }
    
                .zw-more{
                    color: #CCCCCC;
                    font-size:13px;
                    display: inline-block;
                }
                .zw-sure{
                    display: inline-block;
                    width: 72px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background:rgba(67,127,255,1);
                    border-radius:15px;
                    font-size:13px;
                    color: #ffffff;
                    position: absolute;
                    right: 30px;
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
            .zw-main{
                display: flex;
                background: #ffffff;
                .zw-left{
                    width: 200px;
                    height: 443px;
                    overflow: scroll;
                    /*border: 1px solid red;*/
                    .zw-ul{
                        background:rgba(249,250,251,1);
                        .zw-li{
                            height: 50px;
                            /* line-height: 50px;*/
                            text-align: center;
                            align-items: center;
                            display: flex;
                            justify-content: center;
                            border-left: 4px solid transparent;
                            &:hover{
                                cursor: pointer;
                            }
                            /*border: 1px solid pink;*/
                            .li-num{
                                display: inline-block;
                                background: #437FFF;
                                width: 16px;
                                height: 16px;
                                line-height: 16px;
                                border-radius: 50%;
                                font-size:13px;
                                color:#ffffff;
                                margin-left: 8px;
                            }
                        }
                        .li-active{
                            border-left: 4px solid #437FFF;
                            background:rgba(255,255,255,1);
                        }
                    }
                }
                .zw-right{
                    /*border: 1px solid black;*/
    
                    width: calc(100% - 200px);
                    height: 443px;
                    overflow: scroll;
                    .right-main{
    
                        .job-tag{
                            display: inline-block;
                            margin: 16px 20px;
                            width: 182px;
                            font-size:14px;
                            color: #444444;
                            &:hover{
                                cursor: pointer;
                            }
                        }
                        .rm-block{
                            .rm-two-title{
                                color: #444444;
                                margin: 15px 0 15px 24px;
                                font-size: 14px;
                            }
                            .rm-three-block{
                                margin-left: 24px;
                                padding-left: 15px;
                                width:629px;
                                /*height:150px;*/
                                height: auto;
                                border:1px solid rgba(238,238,238,1);
                                display: grid;
                                grid-template-columns: 33.33% 33.33% 33.33%;
                               /* grid-template-rows: 33.33% 33.33% 33.33%;*/
                                .th-word{
                                    display: inline-block;
                                    color: #444444;
                                    font-size: 14px;
                                    width:168px;
                                   /* border: 1px solid red;*/
                                    margin: 15px 0;
                                    &:hover{
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                        .job-active{
                            color: #437FFF !important;
                        }
                    }
                }
    
            }
        }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230208/3cd505a25f2944a8883374d474faa9e0.png
[20200805130153757.png]: /images/20230208/7288cdef0a7b49e9839856327cbacdad.png