el-select 当下拉选项的值过长时的处理

1,625 阅读1分钟

使用 elselect 时,对 select 进行了定宽处理后,当下拉选项的值过长时,显示省略号,当鼠标悬停在选项值上时,弹出显示完成的下拉选项

以下是代码的处理

处理思路也比较简单,使用 el-options 包裹一个 el-tooltip 或者 el-popover,

用长度来确定鼠标悬停后是否显示 el-option 的具体值

<el-form-item label="设备所属者" prop="deviceOwnerId">
    <el-select v-model="deviceForm.deviceOwnerId" style="width:100%" clearable filterable :filter-method="pinyinMatchUser" placeholder="请选择设备所属者" @focus="pinyinMatchUser('')">
        <el-option v-for="item in deviceUserList" :key="item.id" :show-overflow-tooltip="true" style="width:600px" :label="item.label" :value="item.id">
            <el-tooltip :disabled="item.label.length < 60 ? true : false" effect="dark" :content="item.label" placement="top" >
                <span>{{ item.label }}</span>
            </el-tooltip>
         </el-option>
    </el-select>
</el-form-item>

效果如下图

image.png