iview基础知识1——表格中某个单元格内容过多使用省略号

最新推荐文章于 2024-04-17 14:19:36 发布

原创最新推荐文章于 2024-04-17 14:19:36 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iview表格内容过多使用省略号

iview 专栏收录该内容

3 篇文章

订阅专栏

本文介绍在前端开发中如何使用不同的渲染方式来优化表格显示，包括链接、无链接文本及多行数据的省略号处理，提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.有链接
{
title：’名称’，
key：’name’，
ellipsis：true，
render：（h，params）=> {
return h（’a’，{
attrs：{title：params.row.name} ，
on：{click :(）=> {
this.$ router.push（{name：’跳转页面路由的名字’，params：{type: ‘传给跳转页面的参数’}})
}}
}，params.row.name)
}}
2.无链接
{
title：’名称’，
key：’name’，
ellipsis：true，
render：（h，params）=> {
return h（’span’，{
attrs：{title：params.row.name}
}，params.row.name)
}}
3.多行数据，每行过多使用省略号
{
title：’名称’，
key：’name’，
ellipsis：true，
render：（h，params）=> {
return h（’span’，{
style: {
diaplay: ‘inline-block’,
width: ‘100%’,
overflow: ‘hidden,’
textOverflow: ‘ellipsis’,
whiteSpace: ‘nowrap’
}
}，params.row.name)
}}
注：
1. 控制文本不换行
white-space: nowrap;
2. 超出长度时，出现省略号
overflow:hidden;
text-overflow:ellipsis
3. 修改表格布局算法
table-layout:fixed;可以设置表格宽度
table-layout的默认值为automatic