前言:最近做项目中表格偏多,而且要展示的字段大部分都很长,在要求将信息完全展示的同时又要保持界面的美观整洁的情况下,我给Table的每个字段都做了宽度限制(同时也是为了适应不同分辨率下显示不受影响),这样就需要在指定的宽度内显示指定的数据长度,超出的长度隐藏,在Tooltip中完全展示.
1.最初我是直接在render中加了Tooltip并且,发现Tooltip确实实现了展示完整数据的功能,但是并没有折行显示,于是用下面的方法使Tooltip折行
{
title: 'title',
key: 'key',
align: 'center',
ellipsis: true, //超出长度时用...显示
width: 150,
render: (h, params) => {
return h('Tooltip', {
props: {
placement: 'top'
}
}, [
params.row.key,
h('span', {
slot: 'content', //slot属性
style: {
whiteSpace: 'normal',
wordBreak: 'break-all'
}
}, params.row.key)
])
}
}
2.Tootip成功折行显示,但是表格上的数据值超出字段设定宽度后就被边框遮挡,有时甚至单个字体会被遮挡一半,显示非常难看,于是在render中加入了一段方法,成功实现了在render函数中添加Tooltip折行显示,并使表格显示数据超出部分用"..."显示的效果
{
title: 'title',
key: 'key',
align: 'center',
ellipsis: true,
width: 150,
render: (h, params) => {
let texts = ''; //表格列显示文字
if (params.row.key!== null) {
if (params.row.key.length > 6) { //进行截取列显示字数
texts = params.row.key.substring(0, 6) + "...";
} else {
texts = params.row.key;
}
}
return h('Tooltip', {
props: {
placement: 'top'
}
}, [
texts,
h('span', {
slot: 'content',
style: {
whiteSpace: 'normal',
wordBreak: 'break-all'
}
}, params.row.key)
])
}
},