el-transfer 穿梭框文本超出显示tooltip

442 阅读1分钟

image.png

theme: juejin

image.png 代码:

<el-form-item :label="$t('Selecttheleaderforreview')" required>  
<el-transfer  
v-loading="loading"  
v-model="formData.selectValue"  
:data="options"  
:titles="[$t('Optional'), $t('Selectedleaders')]"  
:props="{  
key: 'id',  
label: 'displayName',  
disabled: 'disabled'  
}"  
:render-content="renderFunTooltip"  
renderFunc  
@change="transferChange"  
filterable  
:filter-placeholder="$t('Pleaseentersearchcontent')"  
></el-transfer>  
</el-form-item>
renderFunTooltip(h, option) {  
return h(  
"el-tooltip",  
{  
props: {  
effect: "dark",  
content: option.displayName,  
placement: "top"  
}  
},  
[  
h(  
"span",  
{  
style: {  
// 超出宽度显示省略号  
overflow: "hidden",  
textOverflow: "ellipsis",  
whiteSpace: "nowrap",  
display: "inline-block",  
width: "100%"  
}  
},  
option.displayName  
)  
]  
);  
},