使用Table插件需要再state里面配置以下代码
this.columns = [
{
title:"文件名",
dataIndex:"fileName",(这是后端返回来数组里的字段)
key:"fileName",(这是这个字段的唯一标识符)
render:(text,record)=>{
return (
<div>
<Tooltip title={text}>{text}</Tooltip>
</div>
)
}
},
...
]
这样会再鼠标滑过的时候显示具体的文件名,当你的文件名太长的时候,你可以在div中写样式让他溢出隐藏,然后鼠标滑过的时候则会显示全名。代码如下
this.columns = [
{
title:"文件名",
dataIndex:"fileName",(这是后端返回来数组里的字段)
key:"fileName",(这是这个字段的唯一标识符)
render:(text,record)=>{
return (
<div style={{
maxWidth:"60px",
whitesSpace:"nowrap",
overflow:"hidden",
textOverflow:"ellipsis",
}}>
<Tooltip title={text}>{text}</Tooltip>
</div>
)
}
},
...
]
有时候会出出现这种需求。需要鼠标滑过的时候不只是显示文件名,还要显示文件描述,代码如下
this.columns = [
{
title:"文件名",
dataIndex:"fileName",(这是后端返回来数组里的字段)
key:"fileName",(这是这个字段的唯一标识符)
render:(text,record)=>{
return (
<div style={{
maxWidth:"60px",
whitesSpace:"nowrap",
overflow:"hidden",
textOverflow:"ellipsis",
}}>
<Tooltip title={
<div>
<p>
<span>文件名:</span>{text}
</p>
<p>
<span>描述:</span>{record.descript}(record可以获取到这条数据的所有属性)
</p>
</div>
}>{text}</Tooltip>
</div>
)
}
},
...
]
也就是说title属性里面可以写html 但是要注意,里面只能存在一个大标签,然后他的只能写在里面,不然会报错