在实际开发中,需要开发很多前端的table。如果数据超出当前列的宽度,那么列表中的数据会自动分行显示,但是如果有这个需求文本换行,多余部分在悬停时显示,该怎么解决?下面就写详细的解决方法。
在前端列表中某列配置
{title: '角色类型',
key: 'roleName',
width: 180,
align: 'center',
render: (h, params) => {
return h('div', [
h('span', {
style: {
display: 'inline-block',
width: '100%',
overflow: 'hidden',
textOverflow: 'tooltip',
whiteSpace: 'nowrap'
},
domProps: {
title: params.row.roleName
}
},param.row.roleName)
]}
}
},
再去列表中某项查看,当某项内容多时就会省略显示。鼠标悬停在该项上会显示出全部内容。