element ui的selecte的选择框多选,出hover提示,文字和数量展示一行

 <el-tooltip class="item hello" :disabled="isTooltipDisabled" :content="selectTooltipArr.join(',')"

            placement="top-start">

            <el-select :popper-append-to-body="false" v-model="value2" multiple collapse-tags style="margin-left: 20px;"

                placeholder="请选择">

                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">

                </el-option>

            </el-select>

 </el-tooltip>

<script>

import { reactive, toRefs, watch, nextTick } from 'vue'

export default {

    setup(props, { attrs, slots, emit }) {

        const state = reactive({

            options: [{

                value: '选项1',

                label: '黄金糕对方独特风格一个范围的突发问题一份给我'

            }, {

                value: '选项2',

                label: '双皮奶微博v更大范围广泛为国父一味跟风五月份'

            }, {

                value: '选项3',

                label: '蚵仔煎的货物清单给我他反对他无法'

            }, {

                value: '选项4',

                label: '龙须面请问多个服务器的访谈物权法的土匪特务'

            }, {

                value: '选项5',

                label: '北京烤鸭的方法完全推翻独特风味独特访谈问题'

            }, {

                value: '选项6',

                label: '龙须面请问多个服务器的访谈物权法的土匪特务'

            }, {

                value: '选项7',

                label: '北京烤鸭的方法完全推翻独特风味独特访谈问题'

            },],

            value2: [],

            isTooltipDisabled: true,//判断是否展示tooltip提示

            selectTooltipArr: [],

        })

        const sm = {

            btn() {

                if (state.hdFullImg == null || sessionStorage.getItem('noTip')) {

                    console.log('55')

                } else {

                    state.taskdialogVisible = true;

                }

            },

            handle_ok() {

                // @ts-ignore

                if (state.hdFullImg == true) {

                    // @ts-ignore

                    sessionStorage.setItem('noTip', true)

                }

                state.taskdialogVisible = false;

            }

        }

//监听下拉选择框的数值的变化,用来hover出现提示的作用

        watch(() => state.value2, (newVal) => {

            console.log(newVal, '555955')

            state.selectTooltipArr = []

            newVal.forEach((element) => {

                // @ts-ignore

                state.selectTooltipArr.push(element.label)

                console.log(state.selectTooltipArr, '99');

            })

            nextTick(function () {

                if (!newVal.length) {

                    return (state.isTooltipDisabled = true)

                }

                if (newVal.length > 1) {

                    state.isTooltipDisabled = false

                } else {

                    state.isTooltipDisabled = true

                    // 获取元素

                    const obj2 = document.querySelector('.el-select__tags-text')

                    if (typeof obj2 !== 'undefined') {

                        // @ts-ignore

                        state.isTooltipDisabled = obj2.scrollWidth <= obj2.offsetWidth

                    } else {

                        state.isTooltipDisabled = true

                    }

                }

            })

        })

        return {

            ...toRefs(state),

            ...sm

        }

    }

}

</script>

 

 

 

<style lang="scss" scoped>

.hello {

    // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重

    :deep(input::-webkit-input-placeholder) {

        color: #fff;

    }

    :deep(input::-moz-input-placeholder) {

        color: #fff;

    }

    :deep(input::-ms-input-placeholder) {

        color: #fff;

    }

}

.hello .el-select__tags-text:first-child,

.hello :deep(.el-select__tags-text:first-child) {

    font-size: 0.14rem;

    position: relative;

    top: 2px;

}

body :deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected) {

    background: transparent !important;

}

body .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {

    background: transparent !important;

}

.el-select .el-select__tags>span,

.el-select :deep(.el-select__tags>span) {

    width: 140px;

    display: flex;

}

</style>