翻译语言选择自定义封装（elementUI）

基于elementUI下拉菜单项el-dropdown自定义封装

<template>
    <div>
        <el-dropdown trigger="click" @command="handleCommand">
            <el-input v-model="form.key1" suffix-icon="el-icon-arrow-down" placeholder="请选择"></el-input>
            <el-dropdown-menu slot="dropdown">
                <el-input v-model="form.key2" suffix-icon="el-icon-search" placeholder="搜索语言"></el-input>
                
                <div class="group-content">
                    <vue-scroll :ops="ops" ref="groupRef">
                        <div class="group-list">
                            <div v-for="item in languages" :key="item.title">
                                <div ref="titleRef">{{ item.title }}</div>
                                <el-dropdown-item
                                    v-for="(item, index) in 10"
                                    :key="`${index}+${item.title}`"
                                    class="sort-item"
                                    :command="index"
                                    >
                                    <span>中文</span>
                                </el-dropdown-item>
                            </div>
                        </div>
                    </vue-scroll>
                    <div class="key-list">
                        <div v-for="item in keyList" :key="item" @click="goIndex(item)">
                            {{ item }}
                        </div>
                    </div>
                </div>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
        
</template>
      
<script>

export default {
    data() {
        return {
            form:{
                key1:'',
                key2:''
            },
            keyList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
            languages:[
                {
                    title:'A',
                },
                {
                    title:'B',
                },
                {
                    title:'C',
                },
                {
                    title:'D',
                },
            ],
            //滚动条定义配置项
            ops: {
                vuescroll: {},
                scrollPanel: {
                    scrollingX: false,//关闭横向滚动
                },
                rail: {
                    keepShow: true,
                },
                bar: {
                    hoverStyle: true,
                    onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
                    background: "#efefef", //滚动条颜色
                    opacity: 0.8, //滚动条透明度
                },
            },
        }
    },
    methods:{
        goIndex(key){
            const groupRef=this.$refs.groupRef.$children[0].$el
            const titleRef=this.$refs.titleRef
            titleRef.forEach(item=>{
                if(item.innerText===key){
                    groupRef.scrollTo({
                        top:item.offsetTop,
                        behavior:'smooth'
                    })
                }
            })
        },
        handleCommand(key){
            console.log(key)
            this.form.key1='中文'
        }
    }
}
</script>

<style scoped lang="scss">
/* 设置选项样式 */
/* 设置弹出框的宽高 */
/deep/ .el-dropdown-menu {
    width: 800px;
    // height: 400px;
    padding: 10px;
    .sort-item {
        display: inline-block;
        width: 100px;
        padding: 0 15px;
        margin: 10px 15px 2px 0;
        line-height: 32px;
        font-size: 14px;
        color: #333333;
        text-align: center;
        cursor: pointer;
    }
    .group-content{
        position: relative;
        height:420px;
        margin-top: 20px;
        .group-list{
            height: 400px;
            padding-right: 20px;
        }
        .key-list{
            position: absolute;
            right: 25px;
            top: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #999;
            div{
                text-align: center;
                cursor: pointer;
            }
        }
    }
}
</style>
      

实现效果：