简易妙招：制霸ElementUI多选框，轻松应对内容超长难题

2022-12-18 18:13:44

克服ElementUI多选下拉框选项过长的烦恼：优化技巧

作为一名ElementUI开发人员，你可能经常遇到多选下拉框选项过长的问题。过长的选项会导致下拉框撑开高度，破坏页面布局的和谐。为了解决这个恼人的问题，本文将深入探讨几种实用技巧，帮助你让下拉框更美观、更整齐。

CSS样式优化

1. 固定下拉框高度

使用max-height属性可以限制下拉框的撑开高度。这将确保下拉框保持固定高度，避免内容过长导致的撑开现象。

.el-select-dropdown {
    max-height: 200px;
    overflow: auto;
}

2. 使用省略号

通过text-overflow属性可以实现省略号功能，当选项内容过长时，隐藏多余的内容，用省略号代替。

.el-select-dropdown .el-select-dropdown__item {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

JavaScript动态调整

1. 使用v-if指令控制下拉框高度

Vue.js中的v-if指令可以动态控制下拉框的高度。当选项过多时，隐藏多余的选项，保持下拉框高度不变。

<template>
    <el-select v-model="value" multiple>
        <el-option v-for="option in options" :key="option.value" :label="option.label" v-if="!exceeded"></el-option>
    </el-select>
</template>

<script>
    export default {
        data() {
            return {
                value: [],
                options: [
                    { value: 'A', label: 'Option A' },
                    { value: 'B', label: 'Option B' },
                    { value: 'C', label: 'Option C' },
                    { value: 'D', label: 'Option D' },
                    { value: 'E', label: 'Option E' },
                ],
                exceeded: false,
            };
        },
        watch: {
            value: {
                handler(newValue) {
                    this.exceeded = newValue.length > 3;
                },
                deep: true,
            },
        },
    };
</script>

2. 使用JavaScript代码调整下拉框高度

使用JavaScript代码也可以动态调整下拉框的高度。当选项过多时，通过JavaScript代码隐藏多余的选项，保持下拉框高度不变。

<template>
    <el-select v-model="value" multiple @change="handleSelect">
        <el-option v-for="option in options" :key="option.value" :label="option.label"></el-option>
    </el-select>
</template>

<script>
    export default {
        data() {
            return {
                value: [],
                options: [
                    { value: 'A', label: 'Option A' },
                    { value: 'B', label: 'Option B' },
                    { value: 'C', label: 'Option C' },
                    { value: 'D', label: 'Option D' },
                    { value: 'E', label: 'Option E' },
                ],
            };
        },
        methods: {
            handleSelect() {
                if (this.value.length > 3) {
                    this.$nextTick(() => {
                        const dropdown = this.$el.querySelector('.el-select-dropdown');
                        dropdown.style.height = '200px';
                        dropdown.style.overflow = 'auto';
                    });
                }
            },
        },
    };
</script>