iview表格文字超出后使用省略号

博客给出代码实现表格描述列字数超出单元格时显示省略号。通过设置white - space: nowrap控制文本不换行,overflow:hidden和text - overflow:ellipsis让超出长度时出现省略号,还可使用table - layout:fixed修改表格布局算法并设置表格宽度。

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

直接上代码吧 ,针对描述这一列,如果字数超出单元格,则显示省略号…

{title: '描述', key: 'describe',
  render:(h, params) => {
    return h('div', [
      h('span', {
        style: {display: 'inline-block', 
                width: '100%',
                overflow: 'hidden',
                textOverflow: 'ellipsis', 
                whiteSpace: 'nowrap'},
        domProps: {title: params.row.describe},
        on:{click:(e) => { e.stopPropagation();}}
      }, params.row.describe)
    ]);
  } },

一些注释:

  1. 控制文本不换行
    white-space: nowrap;
  2. 超出长度时,出现省略号
    overflow:hidden;
    text-overflow:ellipsis
  3. 修改表格布局算法
    table-layout:fixed;可以设置表格宽度
    table-layout的默认值为automatic
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值