ivew的Table使用render函数实现文字溢出2行显示省略号和显示tooltip

前端小程

于 2024-11-25 21:30:00 发布

阅读量204

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/CSSAJBQ_/article/details/144031991

需求：列表文字超出2行显示省略号，并且鼠标移入显示全部信息
实现：

{ key: "orgProvinceName", title: "省区", width: 150, align: "center" ,
        render: (h, params) => {
            return h('Tooltip',{
              props:{
                content:params.row.orgProvinceName,
                transfer:true,
                maxWidth:200,
              }
            },
          [
          h('span', {
              style: {
                display: '-webkit-box',
                maxWidth: '130px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                webkitLineClamp:2,
                webkitBoxOrient:"vertical",
              },
              
            }, params.row.orgProvinceName)
          ])
          },   
        },