使用 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>
效果如下图