当前位置：首页 > article >正文

【Element-UI 级联选择器一级多选二级单选】

article 2025/1/3 22:04:46

一、效果图

二、代码如下

可封装为公用组件全局引入使用

<template>
	<div class="wrap-box">
		<div class='cascade-1231' style="width:300px">
		    <el-cascader class='cascader' :options='options' :props='props' clearable :popper-class="'cascade-hide'"
		        @change='handleChange' v-model="valTemp" ref='cascade'>
		        <!-- <template slot-scope="{ node, data }">
		        <span>{{ data.label }}</span>
		    </template> -->
		    </el-cascader>
		</div>
	</div>
    
</template>
  
<script>
export default {
    props: {
        optionsList: {
            type: Array,
            default: function () {
                return []
            }
        },
        val: {
            type: Array,
            default: function () {
                return []
            }
        },
    },
    watch: {
        optionsList: {
            deep: true,
            handler(news, olds) {
                this.options = news;

            },
        },
        val: {
            deep: true,
            handler(news, olds) {
                this.preValue = news;
            },
        }
    },
    data() {
        return {
            valTemp: [],
            props: { multiple: true, expandTrigger: 'click' },
            options: [{
                value: 1,
                label: '北京',
                children: [{
                    value: 3,
                    label: '故宫'
                }, {
                    value: 4,
                    label: '天安门'
                }, {
                    value: 7,
                    label: '颐和园'
                }]
            }, {
                value: 2,
                label: '南京',
                children: [{
                    value: 5,
                    label: '秦淮河'
                }, {
                    value: 6,
                    label: '鸡鸣寺'
                }]
            }],
            preValue: []
        }
    },
    mounted() {
        this.valTemp = this.val;
        this.preValue = this.val;
		
		// 封装组件时 可由父组件传入
        // this.options = this.optionsList; 
    },
    methods: {
        handleChange(val) {
            if (this.preValue.length > 0 && val.length > this.preValue.length) {
                let newIndex;
                let i = 0, j = 0;
                while (i < val.length && j < this.preValue.length) {
                    if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) {
                        i++;
                        j++;
                    } else {
                        //添加在中间的情况
                        newIndex = i;
                        break;
                    }
                }
                //添加在末尾的情况
                if (j === this.preValue.length) {
                    newIndex = i;
                }

                let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]);
                if (delIndex >= 0) {
                    // 取消选择的节点
                    let cancelIndex;
                    for (let i = 0; i < this.options.length; i++) {
                        if (this.options[i].value === val[delIndex][0]) {
                            for (let j = 0; j < this.options[i].children.length; j++) {
                                if (this.options[i].children[j].value === val[delIndex][1]) {
                                    cancelIndex = j;
                                    break;
                                }
                            }
                            break;
                        }
                    }
                    this.$nextTick(() => {
                        let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id;  //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板
                        let liId = document.getElementById(panelId + '-' + cancelIndex);
                        liId.children[0].click();
                    })
                    val[delIndex] = '';
                    val = val.filter(item => item !== '');
                }
            }
            this.preValue = val;
            this.$emit('getVal', this.preValue)
        }
    }
};
</script>
  
<style lang='scss' scoped>
	.wrap-box{
		/* background: #efefef; */
		background: rgba(255,255,255,0.70);
		height: 300px;
		padding:30px;
	}
	
.cascade-1231 {
    width: 100%;
	backgroung:#efefef;
	
    .title {
        display: block;
        margin-bottom: 20px;
    }

    .cascader {
        width: 100%;
        height: 28px;
        line-height: 28px;

        .el-input {
            .el-input__inner {
                // width: 362px;
                height: 28px !important;
                line-height: 28px !important;
                box-sizing: border-box;
            }

        }

        .el-cascader__tags {
            display: flex;
            flex-wrap: nowrap;
            overflow-y: overlay;
            margin-left: 2px;
        }

        .el-cascader__tags::-webkit-scrollbar {
            width: 0;
            height: 3px;
        }

        /*定义滚动条轨道 内阴影+圆角*/

        .el-cascader__tags::-webkit-scrollbar-track {
            background-color: rgba(186, 203, 227, 0.3);
        }

        /*定义滑块 内阴影+圆角*/

        .el-cascader__tags::-webkit-scrollbar-thumb {
            background-color: #B3C2D7;
        }
    }

}
</style>
<style lang="scss">
.cascader {
    .el-input {
        .el-input__inner {
            // width: 362px;
            height: 28px !important;
            line-height: 28px !important;
            box-sizing: border-box;
        }

    }
}

.cascade-hide {
    .el-cascader-menu:first-of-type {
        .el-cascader-node {
            .el-checkbox {
                display: none;
            }
        }
    }

    .el-cascader-menu:nth-child(2) {
        .el-cascader-node {
            .el-checkbox {
                .el-checkbox__inner {
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>